@charset "UTF-8";
:root {
  --color-main: #FA5905;
  --color-sub: #FC935C;
  --color-grad-main-start: #FC6110;
  --color-grad-main-mid: #F78D7A;
  --color-grad-main-end: #F5DB67;
  --color-grad-sub-start: #FDE3D0;
  --color-grad-sub-end: #FDE3D0;
  --grad-main: linear-gradient(
    115deg,
    var(--color-grad-main-start),
    var(--color-grad-main-mid) 60%,
    var(--color-grad-main-end)
  );
  --grad-sub: linear-gradient(
    90deg,
    var(--color-grad-sub-start),
    var(--color-grad-sub-end)
  );
}

/* メイン画像 */
.mainimg .catch {
  margin-top: -3.8em;
}
.mainimg .catch span {
  background-color: #B23D00;
}

/* 目指せる職業のリスト画像 */
.career_options dd {
  background-image: url(../img/department/soundcreator/arrow.svg);
}

/* ◯◯科はこんな学科 */
.about_department li + li {
  margin-top: 1.3em;
}
.about_department figure {
  margin-block: 1em 1.3em;
}

/* 好きに合わせたコース選択 */
.course_selection h5 {
  margin-block: 7.6923076923vw 2.5641025641vw;
  color: var(--color-main);
  font-family: "c-logo";
  font-weight: normal;
  font-size: 4.1025641026vw;
  line-height: 1.55;
}
@media (width >= 768px) {
  .course_selection h5 {
    margin-block: 30px 10px;
    font-size: 16px;
  }
}
.course_selection dl {
  background-color: #fff;
  padding: 0.8em 1em;
}
.course_selection dt {
  margin-bottom: 0.2em;
  font-family: "c-logo";
  font-weight: normal;
  font-size: 5.1282051282vw;
  line-height: 1.5;
}
@media (width >= 768px) {
  .course_selection dt {
    font-size: 20px;
  }
}
.course_selection dd {
  line-height: 1.7;
}
.course_selection .button {
  margin-top: 6.4102564103vw;
  height: auto;
  border-radius: 999px;
  padding-block: 0.8em;
}
@media (width >= 768px) {
  .course_selection .button {
    margin-top: 25px;
  }
}

/* Pick Up */
.pick_up {
  background: linear-gradient(90deg, rgba(252, 97, 16, 0.37), rgba(247, 141, 122, 0.37) 60%, rgba(245, 219, 103, 0.37));
}
.pick_up h4 {
  margin-top: 7.6923076923vw;
  margin-bottom: -3.8461538462vw;
  padding-left: 2.5641025641vw;
}
@media (width >= 768px) {
  .pick_up h4 {
    margin-top: 30px;
    margin-bottom: -50px;
  }
}
.pick_up h5 {
  margin-block: 0.8em;
  display: grid;
  align-content: start;
  justify-items: start;
  gap: 0.3em;
}
@media (width >= 768px) {
  .pick_up h5 {
    height: 3.2em;
  }
}
.pick_up h5 span {
  background-color: var(--color-main);
  padding: 0.1em 0.4em 0.07em;
  color: #fff;
  font-size: 5.1282051282vw;
  font-family: "c-logo";
  font-weight: normal;
}
@media (width >= 768px) {
  .pick_up h5 span {
    font-size: 20px;
  }
}
.pick_up .works {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6.4102564103vw 7.6923076923vw;
}
@media (width >= 768px) {
  .pick_up .works {
    gap: 25px;
  }
}
.pick_up .label {
  display: inline-block;
  margin-block: 0.8em;
  font-weight: 500;
  line-height: 1.4;
}
.pick_up .button {
  height: 6.9230769231vw;
  width: 14.358974359vw;
}
@media (width >= 768px) {
  .pick_up .button {
    height: 35px;
    width: 60px;
  }
}
.pick_up .button i {
  right: 1.2820512821vw;
}
@media (width >= 768px) {
  .pick_up .button i {
    right: 5px;
  }
}
.pick_up .images {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.0256410256vw;
}
.pick_up .images img:first-of-type {
  grid-column: 1/-1;
}

/* ◯◯科授業について */
.about_class {
  background: linear-gradient(85deg, #FFC09F 5%, #FFBEB2);
}
.about_class .qualifications h4 {
  background: linear-gradient(var(--color-grad-main-start), var(--color-grad-main-mid) 60%, var(--color-grad-main-end));
}

/* 担任の先生からのメッセージ */
.teacher_message {
  background: linear-gradient(85deg, #FFC09F 5%, #FFBEB2);
}
@media (width < 767px) {
  .teacher_message .teachers {
    padding-inline: 5.1282051282vw;
  }
}
@media (width >= 768px) {
  .teacher_message .teachers > * {
    max-width: 314px;
  }
}

/* Campus Life */
.campus_life {
  background: linear-gradient(90deg, #FFC09F, #FFBEB2 60%, #FFF4C1);
}
.campus_life .personal {
  padding-left: 33.3333333333vw;
  background-size: 30.7692307692vw;
  background-image: url(../img/department/soundcreator/ttl-personal.svg);
}
@media (width >= 768px) {
  .campus_life .personal {
    padding-left: 130px;
    background-size: 120px;
  }
}
.campus_life .faq dt {
  background-image: url(../img/department/soundcreator/ico-q.svg);
}
.campus_life .faq dd {
  background-image: url(../img/department/soundcreator/ico-a.svg);
}

@media (width >= 768px) {
  .modaal-container {
    max-width: 800px;
  }
}