@charset "UTF-8";
body.is-nav {
  overflow: hidden;
}

.btn-2 {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: clamp(5px, 8vw, 10px);
  height: clamp(45px, 5vw, 75px);
  font-size: clamp(14px, 3.7333333333vw, 16px);
  line-height: 2;
  font-weight: 500;
  color: #fff;
  border-radius: 12px;
}
.btn-2--general {
  background: linear-gradient(to right, #020202, #5A5A5A);
}
.btn-2--area {
  background: linear-gradient(to right, #09753D, #349D74);
}
.btn-2 i {
  display: flex;
  justify-content: center;
  align-items: center;
  width: clamp(22px, 5.8666666667vw, 28px);
  height: clamp(16px, 4.2666666667vw, 20px);
  border-radius: max(1.4641288433vw, 20px);
  background: #fff;
  fill: #222222;
  -webkit-transition: background 0.3s, fill 0.3s;
  transition: background 0.3s, fill 0.3s;
}

.header {
  position: initial;
}

.header__wrap {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  --transition: transform .6s cubic-bezier(.19,1,.22,1);
}
.header__wrap.is-fix {
  position: fixed;
  transform: translate3d(0, -100%, 0);
}
.header__wrap.is-hide {
  transform: translate3d(0, -100%, 0);
  transition: var(--transition);
}
.header__wrap.is-show {
  transition: var(--transition);
  transform: translate3d(0, 0, 0);
}

.header__link {
  width: clamp(66px, 18.6vw, 240px);
  gap: 0.5em;
  font-size: clamp(12px, 1.5625vw, 16px);
  display: none;
}
@media screen and (min-width: 768px) {
  .header__link {
    display: flex;
  }
}
.header__link--general {
  background: linear-gradient(to right, #020202, #020202);
}
.header__link--general::before {
  background: linear-gradient(to right, #020202, #5A5A5A);
}
.header__link--area {
  background: linear-gradient(to right, #09753D, #09753D);
}
.header__link--area::before {
  background: linear-gradient(to right, #09753D, #349D74);
}

@media (hover: hover) and (pointer: fine) {
  .header__link:hover::before {
    transform: translateX(100%);
  }
}
.is-nav > .header__item .header__link {
  color: #fff;
}
.is-nav > .header__item .header__link--general {
  background: linear-gradient(to right, #020202, #020202);
}
.is-nav > .header__item .header__link--general::before {
  background: linear-gradient(to right, #020202, #5A5A5A);
}
.is-nav > .header__item .header__link--area {
  background: linear-gradient(to right, #09753D, #09753D);
}
.is-nav > .header__item .header__link--area::before {
  background: linear-gradient(to right, #09753D, #349D74);
}

.nav__link {
  height: 102px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.nav__link a {
  height: initial;
}
.nav__link a[data-attr] {
  height: initial;
}
.nav__link a[data-attr]::after {
  line-height: 1.6;
}
@media screen and (min-width: 768px) {
  .nav__link {
    justify-content: flex-start;
  }
}
.nav__branch {
  display: flex;
  gap: 1em;
}
.nav__branch a {
  font-size: 16px;
  display: flex;
  flex-direction: row;
  align-items: center;
  height: initial;
}

.fixed-entries {
  position: fixed;
  bottom: 10px;
  left: 0;
  z-index: 1000;
  width: 100%;
  padding: 0 clamp(10px, 2.6666666667vw, 72px);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(11px, 2.9333333333vw, 20px);
}
.fixed-entries .header__link {
  display: flex;
  width: 100%;
}
@media screen and (min-width: 768px) {
  .fixed-entries {
    display: none;
  }
}
.fixed-entries.hidden {
  animation: fixedEntriesFade 0.2s ease-in-out forwards;
  pointer-events: none; /* 重要 */
}
@keyframes fixedEntriesFade {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
.fixed-entries.visible {
  animation: fixedEntriesFadeOut 0.2s ease-in-out forwards;
  pointer-events: all; /* 重要 */
}
@keyframes fixedEntriesFadeOut {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@media screen and (min-width: 768px) {
  .footer-recruit__wrap {
    flex-grow: 1;
    max-width: 577px;
  }
}
@media screen and (min-width: 1367px) {
  .footer-recruit__wrap {
    width: 42.2401171303vw;
  }
}
.footer-recruit__entries {
  display: grid;
  gap: clamp(16px, 2.1333333333vw, 32px);
  padding: 0 clamp(8px, 2.1333333333vw, 16px);
  margin-bottom: clamp(16px, 4.2666666667vw, 37px);
}
@media screen and (min-width: 768px) {
  .footer-recruit__entries {
    grid-template-columns: repeat(2, 1fr);
    padding: 0;
  }
}
@media screen and (min-width: 1367px) {
  .footer-recruit__entries {
    gap: 2.3426061493vw;
  }
}
.footer-recruit__entry {
  position: relative;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  height: clamp(80px, 8vw, 120px);
  font-size: clamp(16px, 4.2666666667vw, 22px);
  color: #fff;
  overflow: hidden;
  border-radius: clamp(12px, 3.2vw, 20px);
  background: linear-gradient(to right, #09753D, #349D74);
  z-index: 1;
  transition: fill 0.3s;
}
@media (hover: hover) and (pointer: fine) {
  .footer-recruit__entry:hover {
    fill: #09753D;
  }
  .footer-recruit__entry:hover::before {
    transform: translateX(-100%);
  }
}
.footer-recruit__entry::before {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: #222;
  z-index: -1;
  transition: transform 0.3s;
}
.footer-recruit__entry--general {
  background: linear-gradient(to right, #020202, #020202);
}
.footer-recruit__entry--general::before {
  background: linear-gradient(to right, #020202, #5A5A5A);
}
.footer-recruit__entry--area {
  background: linear-gradient(to right, #09753D, #09753D);
}
.footer-recruit__entry--area::before {
  background: linear-gradient(to right, #09753D, #349D74);
}

.footer__drop a {
  overflow: hidden;
}
.footer__drop {
  position: relative;
}
.footer__drop--head {
  padding-left: 20px;
  cursor: pointer;
  font-size: clamp(12px, 3.2vw, 14px);
  color: #fff;
  font-family: "IBM Plex Sans JP", YuGothic, "Yu Gothic", serif;
  position: relative;
}
.footer__drop--head::before {
  content: "";
  display: block;
  width: 12px;
  height: 1px;
  background-color: #cecece;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  border-radius: 2px;
}
.footer__drop--head::after {
  content: "";
  display: block;
  width: 12px;
  height: 1px;
  background-color: #cecece;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%) rotate(90deg);
  border-radius: 2px;
}
.footer__drop--head.active::after {
  transform: translateY(-50%) rotate(0deg);
}
.footer__drop--detail {
  transition: ease all 0.5s; /* 擬似要素のトランジションを追加 */
  padding-left: 30px;
}
.footer__drop--detail li {
  position: relative;
}
.footer__drop--detail li::before {
  content: "";
  width: 7px;
  height: 7px;
  display: block;
  border-left: 1px solid #cecece;
  border-bottom: 1px solid #cecece;
  position: absolute;
  top: 40%;
  left: -15px;
  transform: translateY(-40%);
}

.top-mv__intro {
  padding: clamp(24px, 6.4vw, 62px) 0 72px;
}

.top-mv__video {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  overflow: hidden;
  z-index: -10;
}
.top-mv__video::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.2);
}
.top-mv__video video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.top-cource {
  padding: clamp(88px, 23.4666666667vw, 92px) 0 clamp(100px, 26.6666666667vw, 140px);
}
.top-cource__wrapper {
  display: grid;
  gap: 10.6666666667vw;
}
@media screen and (min-width: 1018px) {
  .top-cource__wrapper {
    grid-template-columns: repeat(2, 1fr);
    gap: 2.6666666667vw;
  }
}
.top-cource__item {
  display: grid;
  grid-template-rows: max-content max-content max-content 1fr;
  gap: 1em;
}
.top-cource__cover {
  overflow: hidden;
  position: relative;
  border-top-left-radius: max(0.878477306vw, 12px);
  border-top-right-radius: max(0.878477306vw, 12px);
}
.top-cource__type {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  gap: 0.5em;
  padding: 0 clamp(30px, 8vw, 40px) 0 clamp(20px, 5.3333333333vw, 30px);
  font-size: clamp(14px, 3.7333333333vw, 20px);
  border-bottom-right-radius: max(3.3674963397vw, 46px);
  color: #fff;
}
.top-cource__type--general {
  background: linear-gradient(to right, #020202, #5A5A5A);
}
.top-cource__type--area {
  background: linear-gradient(to right, #09753D, #349D74);
}
.top-cource__type i {
  font-size: 0.85em;
}
.top-cource__image img {
  width: 100%;
  height: auto;
  border-radius: 13px;
}
.top-cource__heading {
  font-size: clamp(16px, 4.2666666667vw, 30px);
  font-weight: 600;
  line-height: 1.7;
}
.top-cource__nav {
  display: grid;
  gap: 3vw;
}
@media screen and (min-width: 768px) {
  .top-cource__nav {
    grid-template-columns: repeat(2, 1fr);
    align-items: end;
  }
}

.top-interview__type--general {
  background: linear-gradient(to right, #020202, #5A5A5A);
}
.top-interview__tag {
  margin-top: 1em;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5em;
}
.top-interview__tag li {
  font-size: 0.9em;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid;
  border-radius: 23px;
  height: clamp(30px, 3vw, 45px);
  padding-inline: 1.5em;
  letter-spacing: 1px;
}

.l-wrapper--mv {
  padding-bottom: clamp(90px, 24vw, 142px);
}

.page-mv--cover .page-mv__head {
  z-index: 2;
}
.page-mv--cover .page-mv__image::before {
  z-index: 1;
  background: rgba(0, 0, 0, 0.2);
}
.page-mv__head span {
  display: flex;
  gap: 1em;
}
.page-mv__head .label {
  font-size: 0.9em;
  display: flex;
  align-items: center;
  background: linear-gradient(57deg, #1E1E1E 0%, #494C4B 72%, #494C4B 100%);
  color: #fff;
  padding: 0.1em 1em;
  border-radius: 12px;
}
.page-mv__head .label.-area {
  background: linear-gradient(to right, #09753D, #349D74);
}

.interview__head.-type-1 [lang=en] {
  background-image: linear-gradient(to right, #020202, #5A5A5A);
}
.interview__head span {
  display: flex;
  gap: 1em;
  align-items: center;
}
.interview__head .label {
  font-size: 0.9em;
  display: flex;
  align-items: center;
  background: linear-gradient(57deg, #1E1E1E 0%, #494C4B 72%, #494C4B 100%);
  color: #fff;
  padding: 0.1em 1em;
  border-radius: 12px;
}
.interview__head .label.-area {
  background: linear-gradient(to right, #09753D, #349D74);
}
.interview__type.-type-general {
  background: linear-gradient(57deg, #1E1E1E 0%, #494C4B 72%, #494C4B 100%);
}
.interview__tag {
  margin-top: 1em;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5em;
}
.interview__tag li {
  font-size: clamp(13px, 3.4666666667vw, 14px);
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid;
  border-radius: 23px;
  height: clamp(28px, 2.3333333333vw, 35px);
  padding-inline: 1em;
  letter-spacing: 1px;
}

.heading-2 span {
  display: flex;
  gap: 1em;
  align-items: center;
}
.heading-2 .label {
  font-size: 0.9em;
  display: flex;
  align-items: center;
  background: linear-gradient(57deg, #1E1E1E 0%, #494C4B 72%, #494C4B 100%);
  color: #fff;
  padding: 0.1em 1em;
  border-radius: 12px;
}
.heading-2 .label.-area {
  background: linear-gradient(to right, #09753D, #349D74);
}

.aside-interview__head.-type-general i {
  color: #000000;
}

.aside-interview__item.-type-general {
  background: linear-gradient(to right, #232323, #5A5A5A);
}

.page__columns--cover {
  padding: clamp(40px, 10.6666666667vw, 80px) 0 clamp(90px, 24vw, 142px);
}

.page__heading > span {
  display: flex;
  align-items: center;
  gap: max(0.7320644217vw, 10px);
}
.page__heading.-general::before {
  content: none;
}
.page__heading.-general .label {
  font-size: 0.6em;
  display: flex;
  align-items: center;
  background: linear-gradient(57deg, #1E1E1E 0%, #494C4B 72%, #494C4B 100%);
  color: #fff;
  padding: 0.1em 1em;
  border-radius: 12px;
}
.page__heading.-general .label.-area {
  background: linear-gradient(to right, #09753D, #349D74);
}

.recruit__desc .underline {
  text-decoration: underline;
}
.recruit__desc .-list li::before {
  content: "・";
}
.recruit__desc .-column {
  flex-direction: column;
}
.recruit__desc .-salary {
  display: grid;
  grid-template-columns: max-content 1fr;
}
.recruit__desc .-salary dt,
.recruit__desc .-salary dd {
  font-weight: normal;
}

.page-nav.-general {
  background: linear-gradient(to right, #232323, #5A5A5A);
}

.job-category__bg {
  opacity: 0.3;
}
.job-category__bg.-area {
  width: clamp(304px, 81.0666666667vw, 1045px);
  opacity: 0.5;
  top: 183px;
}
@media screen and (min-width: 768px) {
  .job-category__bg {
    opacity: 1;
  }
  .job-category__bg.-area {
    opacity: 1;
    top: 0;
  }
  .job-category__wrap.-area {
    padding: 9.8828696925vw 0 8vw;
  }
}