@charset "UTF-8";
@font-face {
  font-family: "03スマートフォントUI";
  src: url(/conts/it-career-labo/fonts/smartfontui.otf);
}
.l-main {
  position: relative;
  color: #000;
  font-family: "03スマートフォントUI", sans-serif;
  font-weight: normal;
  font-feature-settings: "palt";
  overflow: clip;
}
@media (min-width: 600px) {
  .l-main {
    padding-top: 68px;
  }
  .l-main__breadcrumb {
    --gutter-bottom: 26px;
  }
}
@media (max-width: 599px) {
  .l-main {
    padding-top: 70px;
  }
  .l-main__breadcrumb {
    margin-left: 12px;
    margin-right: 12px;
    --gutter-bottom: 0;
  }
}
.l-main .coming-soon {
  pointer-events: none !important;
  cursor: default !important;
}

.p-breadcrumb {
  max-width: 1230px;
}
@media (max-width: 599px) {
  .p-breadcrumb__list {
    padding-bottom: 12px;
  }
}
@media (min-width: 600px) {
  .p-breadcrumb__list li {
    font-size: 14px;
  }
  .p-breadcrumb__list li + li::before {
    top: 1px;
  }
}
@media (max-width: 599px) {
  .p-breadcrumb__list li {
    margin-right: 5px;
    font-size: 8px;
    line-height: 1.1;
    vertical-align: top;
  }
  .p-breadcrumb__list li + li::before {
    margin-right: 3px;
    line-height: 1;
    font-size: 8px;
  }
}
.p-breadcrumb__list a {
  color: #000;
}

.p-btn {
  margin: 0 auto;
  width: min(42.533vw, 544px);
}
.p-btn a {
  padding: min(0.782vw, 10px) min(7.819vw, 100px) min(0.782vw, 10px) min(6.646vw, 85px);
  width: 100%;
  height: min(6.959vw, 89px);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #fff;
  font-size: min(2.502vw, 32px);
  text-decoration: none;
  border-radius: 100px;
  background: linear-gradient(90deg, rgb(76, 217, 237) 0%, rgb(71, 166, 236) 54.38%, rgb(67, 127, 236) 100%);
}
.p-btn a .arrow {
  height: 100%;
  position: absolute;
  right: 0;
  top: 0;
  aspect-ratio: 1;
  border-radius: 50%;
  background: linear-gradient(90deg, rgb(67, 127, 236) 0%, rgb(24, 78, 174) 100%);
}
.p-btn a .arrow::before {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  border-radius: inherit;
  background: url(/conts/it-career-labo/img/icon01.png) no-repeat center center/min(2.971vw, 38px);
  content: "";
}
.p-btn a.coming-soon {
  opacity: 0.75;
  background: linear-gradient(90deg, rgb(177, 177, 177) 0%, rgb(160, 160, 160) 29.35%, rgb(121, 121, 121) 100%);
}
.p-btn a.coming-soon .arrow {
  background: linear-gradient(90deg, rgb(121, 121, 121) 0%, rgb(72, 72, 72) 100%);
}
@media (min-width: 600px) {
  .p-btn a:hover {
    background: linear-gradient(-90deg, rgb(76, 217, 237) 0%, rgb(71, 166, 236) 54.38%, rgb(67, 127, 236) 100%);
    opacity: 1;
  }
}
@media (max-width: 599px) {
  .p-btn {
    width: 326px;
    max-width: 100%;
  }
  .p-btn a {
    padding: 10px 60px 10px 40px;
    height: 54px;
    font-size: min(5.067vw, 19px);
  }
  .p-btn a .arrow::before {
    background-size: 22px;
  }
}

.it-career-labo .content {
  padding: 0 20px;
  position: relative;
}
@media (min-width: 600px) {
  .it-career-labo .content {
    margin: 0 auto;
    padding: 0 min(3.518vw, 45px);
    max-width: 1280px;
  }
}
.it-career-labo .heading01 {
  margin-bottom: 31px;
  text-align: center;
  font-size: min(2.627vw, 33.6px);
  font-weight: normal;
}
.it-career-labo .heading01 .en {
  margin-bottom: 30px;
  display: block;
}
.it-career-labo .heading01 .en img {
  width: min(29.32vw, 375px);
}
@media (max-width: 599px) {
  .it-career-labo .heading01 {
    margin-bottom: 19px;
    font-size: 19.5px;
  }
  .it-career-labo .heading01 .en {
    margin-bottom: 15px;
  }
  .it-career-labo .heading01 .en img {
    width: 189px;
  }
}
.it-career-labo .heading-sub {
  margin-bottom: 19px;
  font-size: min(3.049vw, 39px);
  line-height: 1.744;
}
@media (max-width: 599px) {
  .it-career-labo .heading-sub {
    margin-bottom: 13px;
    font-size: 22.5px;
  }
}
.it-career-labo .fv {
  margin-bottom: min(16.575vw, 212px);
}
.it-career-labo .fv .bg-img {
  opacity: 0;
  transform: translateY(20px);
  transition: 0.8s;
}
.it-career-labo .fv .bg-img.on {
  opacity: 1;
  transform: translateY(0);
}
.it-career-labo .fv .bg01 {
  width: 35.3%;
  position: absolute;
  right: 3.4%;
  top: -47px;
}
.it-career-labo .fv .bg01 img {
  width: 100%;
}
@media (min-width: 1300px) {
  .it-career-labo .fv .bg01 {
    right: -5.6vw;
  }
}
@media (max-width: 599px) {
  .it-career-labo .fv .bg01 {
    width: 199px;
    right: -47px;
    top: 95px;
  }
}
.it-career-labo .fv .bg02 {
  width: 13%;
  position: absolute;
  left: 36.45%;
  bottom: -12%;
}
.it-career-labo .fv .bg02 img {
  width: 100%;
}
@media (max-width: 599px) {
  .it-career-labo .fv .bg02 {
    width: 57px;
    left: 38%;
    top: 7.9%;
    bottom: auto;
  }
}
.it-career-labo .fv .bg03 {
  width: 27.56%;
  position: absolute;
  right: -20.1%;
  top: -5.86%;
  z-index: -1;
}
.it-career-labo .fv .bg03 img {
  width: 100%;
}
@media (min-width: 1300px) {
  .it-career-labo .fv .bg03 {
    right: -16.5vw;
  }
}
@media (max-width: 599px) {
  .it-career-labo .fv .bg03 {
    width: 103px;
    right: 17.5%;
    top: -139px;
  }
}
.it-career-labo .fv .bg04 {
  width: 56.25%;
  position: absolute;
  left: -32.6%;
  top: -10.1%;
  z-index: -1;
}
.it-career-labo .fv .bg04 img {
  width: 100%;
}
@media (min-width: 1300px) {
  .it-career-labo .fv .bg04 {
    left: -21.1vw;
  }
}
@media (max-width: 599px) {
  .it-career-labo .fv .bg04 {
    width: 193px;
    left: auto;
    right: -43px;
    top: 11px;
  }
}
.it-career-labo .fv .bg05 {
  width: 15.57%;
  position: absolute;
  right: -3.8%;
  bottom: -12px;
  z-index: -1;
}
.it-career-labo .fv .bg05 img {
  width: 100%;
}
@media (min-width: 1300px) {
  .it-career-labo .fv .bg05 {
    right: -4.3vw;
  }
}
@media (max-width: 599px) {
  .it-career-labo .fv .bg05 {
    width: 65px;
    right: -12px;
    bottom: 11.2%;
  }
}
.it-career-labo .fv .bg06 {
  width: 32.7%;
  position: absolute;
  left: -21.15%;
  top: 88px;
}
.it-career-labo .fv .bg06 img {
  width: 100%;
}
@media (min-width: 1300px) {
  .it-career-labo .fv .bg06 {
    left: -14.4vw;
  }
}
@media (max-width: 599px) {
  .it-career-labo .fv .bg06 {
    width: 156px;
    left: auto;
    right: 33px;
    top: -42px;
  }
}
.it-career-labo .fv .bg07 {
  width: 10.45%;
  position: absolute;
  right: -16.56%;
  top: 15.8%;
}
.it-career-labo .fv .bg07 img {
  width: 100%;
}
@media (min-width: 1300px) {
  .it-career-labo .fv .bg07 {
    right: -13.2vw;
  }
}
@media (max-width: 599px) {
  .it-career-labo .fv .bg07 {
    width: 41px;
    right: -7px;
    bottom: 6px;
    top: auto;
  }
}
.it-career-labo .fv .bg08 {
  width: 35.4%;
  position: absolute;
  right: -12.5%;
  bottom: -7%;
}
.it-career-labo .fv .bg08 img {
  width: 100%;
}
@media (min-width: 1300px) {
  .it-career-labo .fv .bg08 {
    right: -6.8vw;
  }
}
@media (max-width: 599px) {
  .it-career-labo .fv .bg08 {
    right: 0;
    bottom: auto;
    top: 58px;
    right: -40px;
    width: 96px;
  }
}
.it-career-labo .fv .bg09 {
  width: 41.64%;
  position: absolute;
  left: -3%;
  bottom: -60.6%;
}
.it-career-labo .fv .bg09 img {
  width: 100%;
}
@media (min-width: 1300px) {
  .it-career-labo .fv .bg09 {
    left: -6vw;
  }
}
@media (max-width: 599px) {
  .it-career-labo .fv .bg09 {
    width: 144px;
    left: auto;
    right: 3px;
    bottom: auto;
    top: 137px;
  }
}
.it-career-labo .fv__sub-ttl {
  margin-bottom: 65px;
  padding: min(0.586vw, 7.5px) min(2.502vw, 32px);
  width: fit-content;
  position: relative;
  text-align: center;
  color: #fff;
  font-size: min(1.83vw, 23.4px);
  border-radius: 50px;
  background: linear-gradient(90deg, rgba(67, 127, 236, 0.94) 17.18%, rgba(51, 108, 213, 0.94) 46.8%, rgba(24, 78, 174, 0.94) 100%);
  z-index: 2;
}
@media (max-width: 599px) {
  .it-career-labo .fv__sub-ttl {
    margin-bottom: 25px;
    padding: 9px 10px 6px;
    width: auto;
    font-size: 15px;
    line-height: 1.3;
    border-radius: 15px;
  }
  .it-career-labo .fv__sub-ttl span {
    display: inline-block;
    text-align: left;
  }
}
.it-career-labo .fv__title {
  margin: 0 max(-0.625vw, -8px) 60px min(0.704vw, 9px);
  position: relative;
  z-index: 2;
}
@media (max-width: 599px) {
  .it-career-labo .fv__title {
    margin: 0 14px 25px;
  }
  .it-career-labo .fv__title img {
    width: 324px;
  }
}
.it-career-labo .fv .text-box {
  position: relative;
}
@media (min-width: 600px) {
  .it-career-labo .fv .text-box {
    margin: 0 auto;
    max-width: 76.47%;
  }
  .it-career-labo .fv .text-box .inner {
    margin-left: auto;
    max-width: min(64.269vw, 822px);
  }
  .it-career-labo .fv .text-box p {
    font-size: min(1.955vw, 25px);
    line-height: 1.77;
  }
  .it-career-labo .fv .text-box .text01 {
    margin: 0 max(-0.782vw, -10px) min(0.86vw, 11px) 0;
    font-size: min(3.088vw, 39.5px);
    letter-spacing: -0.05em;
    line-height: 1.75;
  }
  .it-career-labo .fv .text-box .text01 .sub-txt {
    display: block;
  }
}
.it-career-labo .fv .text-box .sub {
  position: relative;
}
.it-career-labo .fv .text-box p {
  position: relative;
  z-index: 1;
}
@media (max-width: 599px) {
  .it-career-labo .fv .text-box {
    padding-left: 12px;
  }
  .it-career-labo .fv .text-box p {
    margin-left: 0.15em;
    font-size: 14px;
    line-height: 1.8;
  }
  .it-career-labo .fv .text-box .text01 {
    margin: 0 0 13px;
    font-size: min(5.333vw, 20px);
    letter-spacing: -0.03em;
    line-height: 1.73;
  }
}
@media (max-width: 374px) {
  .it-career-labo .fv .text-box p {
    margin-left: 0;
    font-size: 3.733vw;
  }
}
@media (max-width: 599px) {
  .it-career-labo .fv {
    margin-bottom: 35px;
  }
  .it-career-labo .fv .content {
    padding: 0 8px;
  }
}
.it-career-labo .movie {
  padding: min(7.193vw, 92px) 0 min(8.21vw, 105px);
  position: relative;
  color: #fff;
}
@media (max-width: 599px) {
  .it-career-labo .movie {
    padding: 71px 0 57px;
  }
}
.it-career-labo .movie::before {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  border-radius: 65px;
  background: linear-gradient(-90deg, rgb(76, 217, 237) 0%, rgb(71, 166, 236) 54.38%, rgb(67, 127, 236) 100%);
  transform: skewY(-9.2deg);
  content: "";
  z-index: -1;
}
@media (max-width: 599px) {
  .it-career-labo .movie::before {
    border-radius: 32px;
  }
}
.it-career-labo .movie .bg01 {
  width: min(251px, 19.625vw);
  position: absolute;
  left: calc(50% + min(393px, 30.727vw));
  top: max(-7.819vw, -100px);
  transform: translateX(-50%);
}
@media (max-width: 599px) {
  .it-career-labo .movie .bg01 {
    width: 125px;
    left: auto;
    right: -65px;
    top: -83px;
  }
}
.it-career-labo .movie .movie-list .text-box {
  opacity: 0.52;
}
.it-career-labo .movie .movie-list .photo {
  overflow: hidden;
}
.it-career-labo .movie .movie-list .photo img {
  width: 100%;
  transition: 0.5s;
}
.it-career-labo .movie .movie-list .mark {
  margin: max(-2.267vw, -29px) auto min(2.033vw, 26px);
  padding: min(0.625vw, 8px) min(1.564vw, 20px) min(0.391vw, 5px);
  width: min(21.11vw, 270px);
  text-align: center;
  color: #fff;
  font-size: min(1.955vw, 25px);
  background: #20A187;
  border-radius: 50px;
  position: relative;
  z-index: 2;
}
.it-career-labo .movie .movie-list .coming-soon .mark {
  background: linear-gradient(90deg, rgb(177, 177, 177) 0%, rgb(160, 160, 160) 29.35%, rgb(121, 121, 121) 100%);
}
.it-career-labo .movie .movie-list .ttl {
  margin-right: -0.5em;
  margin-bottom: min(1.095vw, 14px);
  font-size: min(2.658vw, 34px);
  line-height: 1.6764705882;
  letter-spacing: -0.03em;
}
.it-career-labo .movie .movie-list .text {
  text-align: justify;
  font-size: min(1.173vw, 15px);
}
.it-career-labo .movie .movie-list li {
  vertical-align: top;
}
.it-career-labo .movie .movie-list a {
  display: block;
  text-decoration: none;
}
.it-career-labo .movie .movie-list a:hover {
  opacity: 1;
}
@media (min-width: 600px) {
  .it-career-labo .movie .movie-list a:hover .photo img {
    transform: scale(1.2);
  }
}
.it-career-labo .movie .movie-list .slick-current .text-box {
  opacity: 1;
}
.it-career-labo .movie .movie-list .slick-dots {
  margin-top: min(1.72vw, 22px);
  font-size: 0;
  line-height: 0;
  display: flex;
  justify-content: center;
  gap: min(2.424vw, 31px);
}
.it-career-labo .movie .movie-list .slick-dots li {
  margin: 0;
  padding: 0;
  width: min(1.251vw, 16px);
  height: min(1.251vw, 16px);
  border-radius: 50%;
  background: #fff;
  cursor: pointer;
}
.it-career-labo .movie .movie-list .slick-dots li.slick-active {
  background: linear-gradient(90deg, rgb(67, 127, 236) 17.18%, rgb(51, 108, 213) 46.8%, rgb(24, 78, 174) 100%);
}
.it-career-labo .movie .movie-list .slick-dots li button {
  display: none;
}
@media (min-width: 600px) {
  .it-career-labo .movie .movie-list .slick-slide {
    margin: 0 min(5.004vw, 64px) 0 min(5.082vw, 65px);
    width: min(28.147vw, 360px);
  }
}
@media (max-width: 599px) {
  .it-career-labo .movie .movie-list {
    margin: 0 11px;
  }
  .it-career-labo .movie .movie-list .photo {
    margin: 0 6px;
  }
  .it-career-labo .movie .movie-list .photo img {
    aspect-ratio: 500/469;
    object-fit: cover;
  }
  .it-career-labo .movie .movie-list .mark {
    margin: -22px auto 23px;
    padding: 5px;
    width: 212px;
    max-width: 90%;
    font-size: 20px;
  }
  .it-career-labo .movie .movie-list .ttl {
    margin-bottom: 18px;
    font-size: 21.5px;
    line-height: 1.47;
  }
  .it-career-labo .movie .movie-list .text {
    margin-right: -15px;
    font-size: 11px;
    letter-spacing: -0.03em;
    line-height: 1.77;
  }
  .it-career-labo .movie .movie-list .slick-slide li {
    padding: 0 45px;
  }
  .it-career-labo .movie .movie-list .slick-arrow {
    margin: -16px 0 0;
    padding: 0;
    width: 26px;
    height: 50px;
    position: absolute;
    top: 50%;
    display: block;
    cursor: pointer;
    color: transparent;
    font-size: 0;
    line-height: 0;
    border: none;
    outline: none;
    transform: translateY(-50%);
    background: no-repeat center center/100%;
    z-index: 2;
  }
  .it-career-labo .movie .movie-list .slick-prev {
    left: 0;
    background-image: url(/conts/it-career-labo/img/icon02.png);
  }
  .it-career-labo .movie .movie-list .slick-next {
    right: 0;
    background-image: url(/conts/it-career-labo/img/icon03.png);
  }
  .it-career-labo .movie .movie-list .slick-dots {
    margin-top: 26px;
    gap: 16px;
  }
  .it-career-labo .movie .movie-list .slick-dots li {
    width: 8px;
    height: 8px;
  }
}
.it-career-labo .event {
  position: relative;
  z-index: 2;
}
@media (min-width: 600px) {
  .it-career-labo .event {
    padding: min(6.099vw, 78px) 0 min(10.008vw, 128px);
  }
  .it-career-labo .event .content {
    max-width: 1240px;
  }
}
@media (max-width: 599px) {
  .it-career-labo .event {
    margin-bottom: 102px;
  }
}
.it-career-labo .event .photo {
  width: 62.16%;
  position: absolute;
  right: 43.25%;
  top: max(-5.317vw, -68px);
}
.it-career-labo .event .photo img {
  width: 100%;
}
@media (max-width: 599px) {
  .it-career-labo .event .photo {
    width: 306px;
    right: auto;
    left: -35px;
    top: -24px;
  }
}
.it-career-labo .event .text-box {
  margin: 0 0 min(4vw, 40px) auto;
  width: 42.5%;
}
.it-career-labo .event .text-box .heading01 {
  margin-bottom: min(4.3vw, 55px);
  text-align: right;
}
.it-career-labo .event .text-box .heading01 .en {
  margin-bottom: min(2.58vw, 33px);
}
.it-career-labo .event .text-box .heading01 .en img {
  width: min(28.538vw, 365px);
}
.it-career-labo .event .text-box .text {
  font-size: min(1.329vw, 17px);
  line-height: 1.73;
}
@media (max-width: 599px) {
  .it-career-labo .event .text-box {
    margin: 0;
    padding: 138px 0 23px;
    width: auto;
    position: relative;
    z-index: 1;
  }
  .it-career-labo .event .text-box .heading01 {
    margin-bottom: 31px;
  }
  .it-career-labo .event .text-box .heading01 .en {
    margin-bottom: 11px;
  }
  .it-career-labo .event .text-box .heading01 .en img {
    width: 183px;
  }
  .it-career-labo .event .text-box .text {
    margin-right: -1em;
    font-size: min(4vw, 15px);
  }
}
.it-career-labo .learning {
  padding: min(2.58vw, 33px) 0 min(10.711vw, 137px);
  position: relative;
  z-index: 1;
}
@media (max-width: 599px) {
  .it-career-labo .learning {
    padding: 0 0 65px;
  }
}
.it-career-labo .learning::before {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  border-radius: 65px;
  background: linear-gradient(90deg, rgb(202, 234, 251) 7.2%, rgb(219, 241, 252) 41.97%, rgb(255, 255, 255) 100%);
  transform: skewY(9.2deg);
  content: "";
  z-index: -1;
}
@media (max-width: 599px) {
  .it-career-labo .learning::before {
    border-radius: 32px;
  }
}
@media (min-width: 600px) {
  .it-career-labo .learning .content {
    max-width: 1244px;
  }
}
.it-career-labo .learning .photo {
  width: 47.7%;
  position: absolute;
  right: max(-4.457vw, -57px);
  top: -83px;
}
.it-career-labo .learning .photo img {
  width: 100%;
}
@media (max-width: 599px) {
  .it-career-labo .learning .photo {
    width: 234px;
    right: -7px;
    top: -63px;
  }
}
.it-career-labo .learning .heading01 {
  margin-bottom: min(5.551vw, 71px);
  text-align: left;
}
.it-career-labo .learning .heading01 .en {
  margin-bottom: min(0.782vw, 10px);
}
.it-career-labo .learning .heading01 .en img {
  width: min(50.586vw, 647px);
}
@media (max-width: 599px) {
  .it-career-labo .learning .heading01 {
    padding-top: 98px;
    margin-bottom: 41px;
  }
  .it-career-labo .learning .heading01 .en {
    margin-left: 3px;
  }
  .it-career-labo .learning .heading01 .en img {
    width: 323px;
  }
}
.it-career-labo .learning .inner-wrap {
  margin: 0 auto;
  max-width: 1098px;
}
.it-career-labo .learning .img-box {
  margin-bottom: min(1.7vw, 17px);
  display: flex;
  justify-content: space-between;
}
.it-career-labo .learning .img-box .text-box {
  width: 45%;
}
.it-career-labo .learning .img-box .text-box .heading-sub {
  margin-bottom: min(1.016vw, 13px);
}
.it-career-labo .learning .img-box .text-box .text {
  margin-left: 0.4em;
  font-size: min(1.329vw, 17px);
  line-height: 1.73;
}
.it-career-labo .learning .img-box .photo-box {
  margin: min(10.008vw, 128px) 2.55% 0 0;
  width: 46.45%;
}
.it-career-labo .learning .img-box .photo-box img {
  width: 100%;
}
@media (max-width: 599px) {
  .it-career-labo .learning .img-box {
    display: block;
    margin-bottom: 19px;
  }
  .it-career-labo .learning .img-box .text-box {
    margin-bottom: 17px;
    width: auto;
  }
  .it-career-labo .learning .img-box .text-box .heading-sub {
    margin-bottom: 12px;
  }
  .it-career-labo .learning .img-box .text-box .text {
    margin-left: 0;
    font-size: 15px;
  }
  .it-career-labo .learning .img-box .photo-box {
    margin: 0 auto;
    width: 76%;
  }
}
.it-career-labo .learning .btn-box {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}
.it-career-labo .learning .btn-box .sub-box {
  margin-left: 0.5em;
  width: 42%;
}
.it-career-labo .learning .btn-box .sub-box p {
  color: #1E5FB5;
  font-size: min(1.329vw, 17px);
}
.it-career-labo .learning .btn-box .p-btn {
  margin: 0 min(0.469vw, 6px) min(0.625vw, 8px) 0;
  width: 56%;
}
.it-career-labo .learning .btn-box .p-btn a {
  padding-left: min(5.395vw, 69px);
}
@media (max-width: 599px) {
  .it-career-labo .learning .btn-box {
    display: block;
  }
  .it-career-labo .learning .btn-box .sub-box {
    margin: 0 0 19px;
    width: auto;
  }
  .it-career-labo .learning .btn-box .sub-box p {
    margin-right: -10px;
    font-size: 13px;
  }
  .it-career-labo .learning .btn-box .p-btn {
    margin: 0 auto;
    width: 326px;
  }
  .it-career-labo .learning .btn-box .p-btn a {
    padding-left: 15px;
  }
}
.it-career-labo .link-box {
  margin-top: max(-10.711vw, -137px);
  padding-top: min(141px, 11.024vw);
  padding-bottom: min(11.493vw, 147px);
  position: relative;
}
@media (max-width: 599px) {
  .it-career-labo .link-box {
    margin-top: -65px;
    padding-top: 101px;
    padding-bottom: 53px;
  }
}
.it-career-labo .link-box::before {
  width: 100%;
  height: auto;
  position: absolute;
  left: 0;
  top: -180px;
  bottom: 0;
  background: linear-gradient(0deg, rgb(202, 234, 251) 7.2%, rgb(219, 241, 252) 38.96%, rgb(255, 255, 255) 91.97%);
  content: "";
  z-index: -1;
}
@media (max-width: 599px) {
  .it-career-labo .link-box::before {
    top: -100px;
    background: linear-gradient(0deg, rgb(202, 234, 251) 7.2%, rgb(206, 236, 251) 33.14%, rgb(218, 240, 252) 58.24%, rgb(237, 248, 254) 82.93%, rgb(255, 255, 255) 100%);
  }
}
@media (min-width: 600px) {
  .it-career-labo .link-box::after {
    margin-left: -8px;
    width: 106.7%;
    height: 100%;
    max-width: min(106.802vw, 1366px);
    position: absolute;
    left: 50%;
    top: 0;
    display: block;
    transform: translateX(-50%);
    background: url(/conts/it-career-labo/img/bg11.png) no-repeat center bottom 4%/100%;
    content: "";
  }
}
.it-career-labo .link-box .bg {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  clip: rect(0, auto, auto, 0);
}
.it-career-labo .link-box .bg::before {
  margin-left: 18px;
  width: 683px;
  height: 100%;
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  background: url(/conts/it-career-labo/img/bg11_sp.png) no-repeat center bottom 14%/100%;
  content: "";
}
.it-career-labo .link-box .content {
  padding: 0 min(3.44vw, 44px);
  z-index: 2;
}
@media (max-width: 599px) {
  .it-career-labo .link-box .content {
    padding: 0 20px;
  }
}
.it-career-labo .link-box .link-list {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
}
.it-career-labo .link-box .link-list li {
  width: 47.8%;
}
.it-career-labo .link-box .link-list li .text-box {
  padding: min(7.193vw, 92px) min(3.206vw, 41px) min(1.016vw, 13px);
}
.it-career-labo .link-box .link-list li .text-box .ttl {
  margin-bottom: min(3.206vw, 41px);
  text-align: center;
}
.it-career-labo .link-box .link-list li .text-box .ttl img {
  width: auto;
  max-height: min(12.51vw, 160px);
}
.it-career-labo .link-box .link-list li .text-box .ttl-sub {
  margin-bottom: min(0.938vw, 12px);
  text-align: center;
  font-size: min(2.346vw, 30px);
}
.it-career-labo .link-box .link-list li .text-box .ttl-sub span {
  margin: 0 auto 8px;
  padding: 2px 5px 1px 3px;
  display: block;
  width: fit-content;
  color: #fff;
  line-height: 1;
  background: #000;
}
.it-career-labo .link-box .link-list li .text-box .text {
  font-size: min(1.329vw, 17px);
  letter-spacing: -0.02em;
  text-align: justify;
}
.it-career-labo .link-box .link-list li .mark {
  padding: 5px 34px 4px 10px;
  min-width: min(17.201vw, 220px);
  display: block;
  position: absolute;
  right: min(3.127vw, 40px);
  bottom: min(4.066vw, 52px);
  text-align: center;
  font-size: min(1.72vw, 22px);
  line-height: 1.5;
  border-radius: 40px;
  background: #fff url(/conts/it-career-labo/img/icon04.png) no-repeat right min(1.798vw, 23px) center/min(1.564vw, 20px);
  z-index: 1;
  will-change: transform;
  transition: none;
}
.it-career-labo .link-box .link-list li .pho {
  margin-bottom: -6.4%;
  position: relative;
}
.it-career-labo .link-box .link-list li .pho img {
  width: 100%;
  transition: 0.5s;
}
.it-career-labo .link-box .link-list li .pho .over {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  object-fit: cover;
  opacity: 0;
}
.it-career-labo .link-box .link-list li.item02 {
  margin-top: 8.9%;
}
.it-career-labo .link-box .link-list li.item02 a {
  border-color: #00A0B9;
}
.it-career-labo .link-box .link-list li.item02 .text-box {
  margin-bottom: max(-0.391vw, -5px);
  padding: min(8.053vw, 103px) min(3.518vw, 45px) 0;
}
.it-career-labo .link-box .link-list li.item02 .text-box .ttl {
  margin-bottom: min(2.737vw, 35px);
}
.it-career-labo .link-box .link-list li.item03 {
  margin-top: -4.2%;
}
.it-career-labo .link-box .link-list li.item03 a {
  border-color: #3E5793;
}
.it-career-labo .link-box .link-list li.item03 .text-box {
  padding-bottom: min(1.876vw, 24px);
}
.it-career-labo .link-box .link-list li.item04 {
  margin-top: 4.7%;
}
.it-career-labo .link-box .link-list li.item04 a {
  border-color: #A17CC1;
}
.it-career-labo .link-box .link-list li.item04 .text-box {
  padding-top: min(8.131vw, 104px);
  padding-bottom: min(0.782vw, 10px);
}
.it-career-labo .link-box .link-list li.item04 .text-box .ttl {
  margin-bottom: min(2.737vw, 35px);
}
.it-career-labo .link-box .link-list li a {
  width: 100%;
  height: 100%;
  display: block;
  text-decoration: none;
  background: #fff;
  border: 1px solid #0184D8;
  border-radius: 65px;
  overflow: hidden;
  transform: skewY(9.1deg);
}
.it-career-labo .link-box .link-list li a .inner-wrap {
  position: relative;
  transform: skewY(-9.1deg);
}
@media (min-width: 600px) {
  .it-career-labo .link-box .link-list li a:hover {
    opacity: 1;
  }
  .it-career-labo .link-box .link-list li a:hover .pho .over {
    opacity: 1;
  }
}
.it-career-labo .link-box .link-list li .coming-soon .mark {
  color: #fff;
  background: url(/conts/it-career-labo/img/icon05.png) no-repeat right min(1.642vw, 21px) center/min(1.564vw, 20px), linear-gradient(90deg, #C5C5C7 0%, #BABABA 29.35%, #999997 100%) no-repeat left top/100% 100%;
}
@media (max-width: 599px) {
  .it-career-labo .link-box .link-list {
    margin: 0 auto;
    width: 86%;
    display: block;
    padding-right: 2px;
  }
  .it-career-labo .link-box .link-list li {
    width: auto;
  }
  .it-career-labo .link-box .link-list li a {
    border-radius: 35px;
  }
  .it-career-labo .link-box .link-list li .text-box {
    padding: 42px 17px 8px;
  }
  .it-career-labo .link-box .link-list li .text-box .ttl {
    margin-bottom: 32px;
  }
  .it-career-labo .link-box .link-list li .text-box .ttl img {
    max-height: 80px;
  }
  .it-career-labo .link-box .link-list li .text-box .ttl-sub {
    margin-bottom: 18px;
    font-size: 16px;
  }
  .it-career-labo .link-box .link-list li .text-box .ttl-sub span {
    margin-bottom: 4px;
  }
  .it-career-labo .link-box .link-list li .text-box .text {
    font-size: 10.5px;
    letter-spacing: -0.04em;
  }
  .it-career-labo .link-box .link-list li .mark {
    padding: 2px 25px 2px 10px;
    width: 143px;
    right: 12px;
    bottom: 30px;
    font-size: 15px;
    background-size: 12px;
    background-position: right 15px center;
  }
  .it-career-labo .link-box .link-list li.item02 {
    margin-top: 13px;
  }
  .it-career-labo .link-box .link-list li.item02 .text-box {
    margin-bottom: 0;
    padding: 43px 17px 8px;
  }
  .it-career-labo .link-box .link-list li.item02 .text-box .ttl {
    margin-bottom: 25px;
  }
  .it-career-labo .link-box .link-list li.item02 .text-box .ttl-sub {
    margin-bottom: 15px;
  }
  .it-career-labo .link-box .link-list li.item03 {
    margin-top: 13px;
  }
  .it-career-labo .link-box .link-list li.item03 .text-box {
    padding-bottom: 8px;
  }
  .it-career-labo .link-box .link-list li.item04 {
    margin-top: 13px;
  }
  .it-career-labo .link-box .link-list li.item04 .text-box {
    padding-top: 43px;
    padding-bottom: 8px;
  }
  .it-career-labo .link-box .link-list li.item04 .text-box .ttl {
    margin-bottom: 25px;
  }
  .it-career-labo .link-box .link-list li .coming-soon .mark {
    padding-left: 5px;
    background-size: 12px auto, 100% 100%;
    background-position: right 15px center, left top;
  }
}
@media (min-width: 376px) and (max-width: 599px) {
  .it-career-labo .link-box .link-list li .pho {
    margin-bottom: -7%;
  }
}
@media (max-width: 374px) {
  .it-career-labo .link-box .link-list {
    width: 288px;
    max-width: 100%;
  }
}

@media (max-width: 599px) {
  .c-inquiry__list {
    text-align: center;
  }
  .l-main a:hover {
    opacity: 1 !important;
  }
}
/* ------------------------------------------------------------
	c-anime-floting
------------------------------------------------------------ */
.on .c-anime-floting {
  animation: floating 4000ms cubic-bezier(0.75, 0.05, 0.25, 1) infinite;
}

.on .c-anime-floting2 {
  animation: floating 8000ms cubic-bezier(0.75, 0.05, 0.25, 1) infinite;
}

.fade-up {
  opacity: 0;
  transform: translateY(20px);
  transition: 1s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.fade-up.on {
  opacity: 1;
  transform: translateY(0);
}

/* ------------------------------------------------------------
	floating
------------------------------------------------------------ */
@keyframes floating {
  0%, 100% {
    transform: translate3d(0, 4%, 0);
  }
  50% {
    transform: translate3d(0, -4%, 0);
  }
}
/* ------------------------------------------------------------
	lesson
------------------------------------------------------------ */
.lesson {
  padding-top: 4px;
  position: relative;
}
@media (max-width: 599px) {
  .lesson {
    padding-top: 17px;
  }
}
.lesson .content {
  padding: 0 20px;
  position: relative;
  z-index: 1;
}
@media (min-width: 600px) {
  .lesson .content {
    margin: 0 auto;
    padding: 0 min(3.518vw, 45px);
    max-width: 1280px;
  }
}
.lesson .page-lead {
  position: absolute;
  right: min(3.206vw, 41px);
  top: -5px;
  z-index: 1;
}
.lesson .page-lead img {
  margin: 0;
  width: auto;
  height: min(4.848vw, 62px);
}
@media (max-width: 599px) {
  .lesson .page-lead {
    right: 13px;
    top: 3px;
  }
  .lesson .page-lead img {
    height: 25.7px;
  }
}
.lesson .page-title {
  margin-bottom: min(3.597vw, 46px);
  padding: min(10.086vw, 129px) 20px min(12.744vw, 163px);
  position: relative;
}
@media (max-width: 599px) {
  .lesson .page-title {
    margin-bottom: 28px;
    padding: 64px 20px 85px;
  }
}
.lesson .page-title__bg {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  background: radial-gradient(50% 85.3%, rgb(101, 195, 255) 0%, rgb(38, 153, 229) 59.74%, rgb(0, 128, 213) 100%);
}
.lesson .page-title__bg-wrap {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  mask: url(/conts/it-career-labo/img/mask.png) no-repeat center center/100% 100%;
}
@media (max-width: 599px) {
  .lesson .page-title__bg-wrap {
    mask-image: url(/conts/it-career-labo/img/mask_sp.png);
  }
}
@media (max-width: 599px) {
  .lesson .page-title__bg {
    background: radial-gradient(50% 100% at 65% 55%, rgb(101, 195, 255) 0%, rgb(38, 153, 229) 60%, rgb(0, 128, 213) 100%);
    background-size: 130% 110%;
  }
}
.lesson .page-title__bg::after {
  width: 100%;
  height: 100%;
  position: absolute;
  right: 0;
  top: 0;
  background: url(/conts/it-career-labo/img/lesson01/bg03.png) no-repeat right max(-38.546vw, -493px) top min(3.362vw, 43px)/min(63.174vw, 808px);
  content: "";
}
@media (max-width: 599px) {
  .lesson .page-title__bg::after {
    background-size: 404px;
    background-position: right -274px top 11px;
  }
}
@media (min-width: 600px) {
  .lesson .page-title__inner {
    margin: 0 auto;
    max-width: 1100px;
  }
}
.lesson .page-title__h1 {
  width: fit-content;
  color: #fff;
  font-size: min(5.864vw, 75px);
  line-height: 1.2;
  position: relative;
  z-index: 4;
}
.lesson .page-title__h1 .txt01 {
  margin-bottom: min(1.72vw, 22px);
  padding: 2px min(0.782vw, 10px) 0;
  width: fit-content;
  display: block;
  font-size: min(2.815vw, 36px);
  line-height: 1;
  background: #000;
}
.lesson .page-title__h1 .txt02 {
  margin-top: min(2.033vw, 26px);
  max-width: min(50.508vw, 646px);
  display: block;
  text-align: center;
  line-height: 0;
}
.lesson .page-title__h1 .txt02 img {
  width: min(25.02vw, 320px);
}
@media (max-width: 599px) {
  .lesson .page-title__h1 {
    font-size: 37px;
    line-height: 1.12;
  }
  .lesson .page-title__h1 .txt01 {
    margin-bottom: 13px;
    padding: 1px 5px 0;
    font-size: 18px;
  }
  .lesson .page-title__h1 .txt02 {
    margin-top: 10px;
    max-width: initial;
    text-align: left;
  }
  .lesson .page-title__h1 .txt02 img {
    width: 160px;
  }
}
.lesson .page-title__img {
  margin-left: min(18.843vw, 241px);
  width: min(25.176vw, 322px);
  position: absolute;
  left: 50%;
  bottom: max(-5.629vw, -72px);
  transform: translateX(-50%);
  z-index: 2;
}
@media (max-width: 599px) {
  .lesson .page-title__img {
    margin-left: 0;
    width: 162px;
    left: 69.45%;
    bottom: -36px;
  }
}
.lesson .intro {
  margin-bottom: min(6.02vw, 77px);
  position: relative;
  color: #0080D5;
}
.lesson .intro .content {
  max-width: 1190px;
}
.lesson .intro__inner {
  margin-left: min(14.073vw, 180px);
  position: relative;
}
.lesson .intro__ttl {
  margin-bottom: min(2.893vw, 37px);
  font-size: min(3.597vw, 46px);
  font-weight: normal;
}
.lesson .intro__ttl-img {
  width: min(4.378vw, 56px);
  position: absolute;
  left: min(1.564vw, 20px);
  top: max(-6.646vw, -85px);
}
.lesson .intro__text {
  margin-bottom: min(3.518vw, 45px);
  font-size: min(1.876vw, 24px);
}
.lesson .intro__text:last-child {
  margin-bottom: 0 !important;
}
@media (max-width: 599px) {
  .lesson .intro {
    margin-bottom: 24px;
  }
  .lesson .intro__inner {
    margin-left: min(16.578vw, 62px);
    margin-right: -10px;
  }
  .lesson .intro__ttl {
    margin-bottom: 17px;
    font-size: min(5.882vw, 22px);
    line-height: 1.78;
    letter-spacing: 0.02em;
  }
  .lesson .intro__ttl-img {
    width: 28px;
    left: 15px;
    top: -39px;
  }
  .lesson .intro__text {
    margin-bottom: 23px;
    font-size: min(3.476vw, 13px);
    letter-spacing: -0.03em;
  }
}
@media (max-width: 374px) {
  .lesson .intro__inner {
    margin-left: 14.5vw;
  }
}
.lesson .c-heading01 {
  margin-bottom: min(3.753vw, 48px);
  font-size: min(3.518vw, 45px);
  font-weight: normal;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.48;
}
.lesson .c-heading01 span {
  margin-bottom: -1px;
  padding: min(0.235vw, 3px) min(1.564vw, 20px) 0 min(1.955vw, 25px);
  border: 1px solid #fff;
}
@media (max-width: 599px) {
  .lesson .c-heading01 {
    margin-bottom: 23px;
    font-size: min(6.016vw, 22.5px);
    line-height: 1.43;
  }
  .lesson .c-heading01 span {
    margin-bottom: -1px;
    padding: min(0.535vw, 2px) min(2.674vw, 10px) 0 min(3.209vw, 12px);
  }
}
.lesson .c-heading02 {
  margin-bottom: min(2.346vw, 30px);
  font-size: min(2.658vw, 34px);
  font-weight: normal;
  color: #0080D5;
  line-height: 1.38;
}
.lesson .c-heading02 .sml {
  display: block;
  color: #000;
  font-size: min(1.798vw, 23px);
}
@media (max-width: 599px) {
  .lesson .c-heading02 {
    margin-bottom: 15px;
    font-size: min(4.545vw, 17px);
    line-height: 1.32;
  }
  .lesson .c-heading02 .sml {
    margin-top: 1px;
    font-size: 11.5px;
  }
}
.lesson .c-heading03 {
  margin-bottom: min(3.831vw, 49px);
  text-align: center;
  color: #0080D5;
  font-size: min(3.753vw, 48px);
  font-weight: normal;
}
@media (max-width: 599px) {
  .lesson .c-heading03 {
    font-size: 24px;
    line-height: 1.36;
    margin-bottom: 7px;
  }
}
.lesson .c-heading04 {
  margin-bottom: min(2.815vw, 36px);
  padding: min(0.782vw, 10px) min(0.782vw, 10px) min(0.704vw, 9px);
  font-size: min(2.346vw, 30px);
  text-align: center;
  color: #fff;
  line-height: 1.3;
  background-color: #3E5790;
}
@media (max-width: 599px) {
  .lesson .c-heading04 {
    margin-bottom: 22px;
    padding: 5px;
    font-size: 15px;
  }
}
.lesson .white-wrap-box {
  position: relative;
}
.lesson .white-wrap-box .bg {
  width: min(62.34vw, 798px);
  height: auto;
  position: absolute;
  right: max(-30.8vw, -394px);
  top: min(23.1vw, 295px);
  content: "";
  z-index: -1;
}
@media (max-width: 599px) {
  .lesson .white-wrap-box .bg {
    width: 399px;
    right: -165px;
    top: -247px;
    aspect-ratio: 798/775;
  }
}
.lesson .white-wrap-box .bg02 {
  width: min(62.34vw, 798px);
  height: auto;
  position: absolute;
  left: max(-30.5vw, -390px);
  top: min(42vw, 537px);
  content: "";
  z-index: -1;
}
@media (max-width: 599px) {
  .lesson .white-wrap-box .bg02 {
    width: 399px;
    right: -153px;
    left: auto;
    top: 164px;
    aspect-ratio: 798/775;
  }
}
.lesson .white-wrap-box .bg03 {
  top: min(54.4vw, 696px);
}
@media (max-width: 599px) {
  .lesson .white-wrap-box .bg03 {
    top: auto;
    bottom: 84px;
  }
}
.lesson .white-wrap-box .bg04 {
  top: min(40vw, 511px);
  left: max(-25.3vw, -324px);
}
@media (max-width: 599px) {
  .lesson .white-wrap-box .bg04 {
    top: auto;
    bottom: -278px;
    left: auto;
    right: -165px;
  }
}
.lesson .white-wrap-box .bg05 {
  top: max(-6.4vw, -81px);
}
@media (max-width: 599px) {
  .lesson .white-wrap-box .bg05 {
    top: -14px;
  }
}
.lesson .white-wrap-box .bg06 {
  right: auto;
  left: max(-10.94vw, -140px);
  top: auto;
  bottom: min(4.7vw, 60px);
}
@media (max-width: 599px) {
  .lesson .white-wrap-box .bg06 {
    left: -140px;
    bottom: 60px;
  }
}
.lesson .white-wrap-box .bg07 {
  top: auto;
  bottom: max(-22.7vw, -290px);
  right: auto;
  left: max(-11.4vw, -146px);
}
@media (max-width: 599px) {
  .lesson .white-wrap-box .bg07 {
    bottom: -290px;
    left: -146px;
  }
}
.lesson .white-wrap-box .bg08 {
  right: auto;
  left: max(-11vw, -140px);
  top: min(18vw, 230px);
}
@media (max-width: 599px) {
  .lesson .white-wrap-box .bg08 {
    left: -140px;
    top: 230px;
  }
}
.lesson .white-wrap {
  position: relative;
  padding: min(2.737vw, 35px) min(2.737vw, 35px) min(1.564vw, 20px);
  color: #000;
  border-radius: min(2.346vw, 30px);
  background: #fff;
}
@media (max-width: 599px) {
  .lesson .white-wrap {
    padding: 18px 15px 11px;
    border-radius: 15px;
  }
}
.lesson .image {
  text-align: center;
}
@media (max-width: 599px) {
  .lesson .image {
    margin: 0 -4px 0 -3px;
  }
  .lesson .image a {
    display: inline-block;
  }
}
.lesson .enlarge {
  margin: 5px -4px 0 -3px;
  text-align: left;
  line-height: 1.5;
}
.lesson .enlarge span {
  padding: 4px 17px 2px 20px;
  display: inline-block;
  vertical-align: top;
  font-size: 11.5px;
  background: url(/conts/it-career-labo/img/icon06.png) no-repeat left 1px center/15px, url(/conts/it-career-labo/img/icon07.png) no-repeat right center/12px;
}
.lesson .sec-box {
  margin-top: max(-9.382vw, -120px);
  padding: min(10.164vw, 130px) 0 min(21.501vw, 275px);
  color: #fff;
  clip-path: polygon(0 0, 100% min(8.366vw, 107px), 100% 100%, 0 100%);
  position: relative;
}
.lesson .sec-box::after {
  width: 100%;
  height: min(20.719vw, 265px);
  position: absolute;
  left: 0;
  bottom: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgb(255, 255, 255) 96.62%);
  content: "";
}
.lesson .sec-box.sec01 {
  margin-top: 0 !important;
}
.lesson .sec-box .content {
  max-width: 1200px;
}
.lesson .sec-box .ttl-box {
  margin: 0 min(0.625vw, 8px) min(3.284vw, 42px);
}
.lesson .sec-box p {
  margin-bottom: min(2.424vw, 31px);
  text-align: justify;
  font-size: min(1.876vw, 24px);
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 400;
  letter-spacing: 0.07em;
  line-height: 1.75;
  word-wrap: break-word;
}
.lesson .sec-box p:last-child {
  margin-bottom: 0 !important;
}
.lesson .sec-box .txt-box {
  margin: 0 min(1.016vw, 13px) min(3.44vw, 44px);
}
.lesson .sec-box .txt-box:last-child {
  margin-bottom: 0 !important;
}
.lesson .sec-box .txt-box p {
  margin-bottom: min(3.284vw, 42px);
}
@media (max-width: 599px) {
  .lesson .sec-box {
    margin-top: -43px;
    padding: 64px 0 127px;
    clip-path: polygon(0 0, 100% 31px, 100% 100%, 0 100%);
  }
  .lesson .sec-box::after {
    height: 132px;
  }
  .lesson .sec-box .content {
    padding: 0 16px;
    max-width: initial;
  }
  .lesson .sec-box .ttl-box {
    margin: 0 0 16px;
  }
  .lesson .sec-box p {
    margin-bottom: 15px;
    font-size: min(3.743vw, 14px);
  }
  .lesson .sec-box .txt-box {
    margin: 0 0 17px;
  }
  .lesson .sec-box .txt-box p {
    margin-bottom: 25px;
  }
}
.lesson .conclusion {
  margin-top: -1px;
  padding-top: min(9.07vw, 116px);
  padding-bottom: min(8.366vw, 107px);
  position: relative;
  color: #0080D5;
  background: #fff;
  z-index: 1;
}
.lesson .conclusion .content {
  max-width: 1190px;
}
.lesson .conclusion__inner {
  position: relative;
  margin-left: min(14.073vw, 180px);
}
.lesson .conclusion__ttl {
  margin-bottom: min(2.893vw, 37px);
  font-size: min(3.597vw, 46px);
  font-weight: normal;
}
.lesson .conclusion__ttl-img {
  width: min(4.378vw, 56px);
  position: absolute;
  left: min(1.564vw, 20px);
  top: max(-6.646vw, -85px);
}
.lesson .conclusion__text {
  margin-bottom: min(3.518vw, 45px);
  font-size: min(1.876vw, 24px);
}
.lesson .conclusion__text:last-child {
  margin-bottom: 0 !important;
}
@media (max-width: 599px) {
  .lesson .conclusion {
    padding: 60px 0 0;
    background: transparent;
  }
  .lesson .conclusion__inner {
    margin-left: min(17.38vw, 65px);
    margin-right: -10px;
  }
  .lesson .conclusion__ttl {
    margin-bottom: 17px;
    font-size: min(5.882vw, 22px);
    line-height: 1.78;
    letter-spacing: 0.02em;
  }
  .lesson .conclusion__ttl-img {
    width: 28px;
    left: 15px;
    top: -38px;
  }
  .lesson .conclusion__text {
    margin-bottom: 23px;
    font-size: min(3.476vw, 13px);
    letter-spacing: -0.03em;
  }
}
@media (max-width: 374px) {
  .lesson .conclusion__inner {
    margin-left: 14.5vw;
  }
}
.lesson .link-box {
  padding: min(4.769vw, 61px) 0 min(5.004vw, 64px);
  background: linear-gradient(30deg, rgb(202, 234, 251) 7.2%, rgb(219, 241, 252) 38.96%, rgb(255, 255, 255) 91.97%);
}
@media (max-width: 599px) {
  .lesson .link-box {
    margin-top: -90px;
    padding: 139px 0 41px;
  }
}
@media (min-width: 600px) {
  .lesson .link-box .content {
    max-width: 1270px;
  }
}
.lesson .link-box .link-list {
  margin-left: min(0.704vw, 9px);
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: min(2.267vw, 29px);
}
.lesson .link-box .link-list li {
  width: calc((100% - min(4.535vw, 58px)) / 3);
}
.lesson .link-box .link-list li .text-box {
  padding: min(5.238vw, 67px) min(1.564vw, 20px) min(1.329vw, 17px);
  width: 100%;
}
.lesson .link-box .link-list li .text-box .ttl {
  margin-bottom: min(1.876vw, 24px);
  text-align: center;
}
.lesson .link-box .link-list li .text-box .ttl img {
  width: auto;
  height: min(8.131vw, 104px);
}
.lesson .link-box .link-list li .text-box .ttl-sub {
  text-align: center;
  font-size: min(1.486vw, 19px);
}
.lesson .link-box .link-list li .text-box .ttl-sub span {
  margin: 0 auto 4px;
  padding: 2px 5px 1px 3px;
  display: block;
  width: fit-content;
  color: #fff;
  line-height: 1;
  background: #000;
}
.lesson .link-box .link-list li .mark {
  padding: 3px min(2.346vw, 30px) 2px min(1.095vw, 14px);
  min-width: min(11.181vw, 143px);
  display: block;
  position: absolute;
  right: min(1.955vw, 25px);
  bottom: min(0.782vw, 10px);
  text-align: center;
  font-size: min(1.173vw, 15px);
  line-height: 1.5;
  letter-spacing: -0.02em;
  border-radius: 40px;
  background: #fff url(/conts/it-career-labo/img/icon04.png) no-repeat right min(1.173vw, 15px) center/min(1.016vw, 13px);
  z-index: 1;
  will-change: transform;
  transition: none;
}
.lesson .link-box .link-list li .pho {
  margin-top: auto;
  margin-bottom: -6.4%;
  width: 100%;
  position: relative;
}
.lesson .link-box .link-list li .pho img {
  width: 100%;
  transition: 0.5s;
}
.lesson .link-box .link-list li .pho .over {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  object-fit: cover;
  opacity: 0;
}
.lesson .link-box .link-list li.item01 .text-box {
  padding-bottom: min(0.469vw, 6px);
}
.lesson .link-box .link-list li.item02 a {
  border-color: #00A0B9;
}
.lesson .link-box .link-list li.item03 .text-box {
  padding-top: min(4.848vw, 62px);
}
.lesson .link-box .link-list li.item03 a {
  border-color: #3E5793;
}
.lesson .link-box .link-list li.item04 .text-box {
  padding-bottom: min(0.547vw, 7px);
}
.lesson .link-box .link-list li.item04 a {
  border-color: #A17CC1;
}
.lesson .link-box .link-list li a {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  background: #fff;
  border: 1px solid #0184D8;
  border-radius: 45px;
  overflow: hidden;
  transform: skewY(9.1deg);
}
.lesson .link-box .link-list li a .inner-wrap {
  position: relative;
  transform: skewY(-9.1deg);
}
@media (min-width: 600px) {
  .lesson .link-box .link-list li a:hover {
    opacity: 1;
  }
  .lesson .link-box .link-list li a:hover .pho .over {
    opacity: 1;
  }
}
.lesson .link-box .link-list li .coming-soon .mark {
  color: #fff;
  background: url(/conts/it-career-labo/img/icon05.png) no-repeat right min(1.642vw, 21px) center/min(1.564vw, 20px), linear-gradient(90deg, #C5C5C7 0%, #BABABA 29.35%, #999997 100%) no-repeat left top/100% 100%;
}
@media (max-width: 599px) {
  .lesson .link-box .link-list {
    margin: 0 auto;
    width: 85.3%;
    gap: 13px;
    flex-wrap: wrap;
  }
  .lesson .link-box .link-list li {
    width: 100%;
  }
  .lesson .link-box .link-list li a {
    border-radius: 35px;
  }
  .lesson .link-box .link-list li .text-box {
    padding: 52px 17px 12px;
  }
  .lesson .link-box .link-list li .text-box .ttl {
    margin-bottom: 18px;
  }
  .lesson .link-box .link-list li .text-box .ttl img {
    height: 80px;
  }
  .lesson .link-box .link-list li .text-box .ttl-sub {
    font-size: 15px;
  }
  .lesson .link-box .link-list li .text-box .ttl-sub span {
    margin-bottom: 3px;
    padding: 1px 2px;
  }
  .lesson .link-box .link-list li .text-box .text {
    font-size: 10.5px;
    letter-spacing: -0.04em;
  }
  .lesson .link-box .link-list li .mark {
    padding: 3px 25px 2px 10px;
    width: 143px;
    right: 14px;
    bottom: 10px;
    font-size: 15px;
    background-size: 12px;
    background-position: right 15px center;
  }
  .lesson .link-box .link-list li.item03 .text-box {
    padding-top: 45px;
  }
  .lesson .link-box .link-list li .coming-soon .mark {
    padding-left: 5px;
    background-size: 12px auto, 100% 100%;
    background-position: right 15px center, left top;
  }
}
@media (min-width: 376px) and (max-width: 599px) {
  .lesson .link-box .link-list li .pho {
    margin-bottom: -7%;
  }
}
@media (max-width: 374px) {
  .lesson .link-box .link-list {
    width: 288px;
    max-width: 100%;
  }
}

.lesson01 .img-box01 {
  margin-bottom: min(2.971vw, 38px);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: min(1.251vw, 16px) 0;
  position: relative;
}
.lesson01 .img-box01::before {
  content: "";
  width: min(102.58vw, 1312px);
  height: min(61.923vw, 792px);
  position: absolute;
  right: max(-84.91vw, -1086px);
  top: min(16.654vw, 213px);
  background: url(/conts/it-career-labo/img/lesson01/bg02.png) no-repeat center center/100%;
  z-index: -1;
}
.lesson01 .img-box01 .item01 {
  width: 47%;
}
.lesson01 .img-box01 .item02 {
  width: 51.2%;
}
.lesson01 .img-box01 .item02 .c-heading02 {
  margin-bottom: min(1.095vw, 14px);
}
@media (min-width: 600px) {
  .lesson01 .img-box01 .item02 .image {
    max-width: 496px;
  }
}
.lesson01 .img-box01 .item03 {
  padding: min(3.127vw, 40px) min(1.955vw, 25px) min(2.267vw, 29px);
  width: 100%;
}
.lesson01 .img-box01 .item03 .c-heading02 {
  margin-bottom: min(2.815vw, 36px);
}
@media (max-width: 599px) {
  .lesson01 .img-box01 {
    margin-bottom: 18px;
    gap: 11px 0;
  }
  .lesson01 .img-box01::before {
    width: 656px;
    height: 396px;
    right: -482px;
    top: 54px;
  }
  .lesson01 .img-box01 .item01 {
    width: 100%;
  }
  .lesson01 .img-box01 .item02 {
    padding-bottom: 8px;
    width: 100%;
  }
  .lesson01 .img-box01 .item02 .c-heading02 {
    margin-bottom: 15px;
  }
  .lesson01 .img-box01 .item02 .enlarge {
    margin-top: -1px;
  }
  .lesson01 .img-box01 .item03 {
    padding: 21px 15px 8px;
  }
  .lesson01 .img-box01 .item03 .c-heading02 {
    margin-bottom: 17px;
  }
  .lesson01 .img-box01 .item03 .enlarge {
    margin-top: -8px;
  }
}
.lesson01 .img-box02 {
  position: relative;
}
.lesson01 .img-box02::before {
  content: "";
  width: min(1312px, 102.58vw);
  height: min(792px, 61.923vw);
  position: absolute;
  left: max(-42.064vw, -538px);
  top: min(18.139vw, 232px);
  background: url(/conts/it-career-labo/img/lesson01/bg02.png) no-repeat center center/100%;
  z-index: -1;
}
.lesson01 .img-box02 .white-wrap {
  padding: min(4.378vw, 56px) min(2.346vw, 30px) min(2.58vw, 33px);
  position: relative;
}
.lesson01 .img-box02 .image {
  margin-bottom: min(2.815vw, 36px);
}
.lesson01 .img-box02 .image img {
  width: min(72.713vw, 930px);
}
.lesson01 .img-box02 .note {
  margin: 0 auto;
  max-width: min(72.713vw, 930px);
  font-size: min(1.173vw, 15px);
  line-height: 1.44;
}
.lesson01 .img-box02 .note a {
  text-decoration: none;
}
.lesson01 .img-box02 .note a:hover {
  text-decoration: underline;
}
@media (max-width: 599px) {
  .lesson01 .img-box02::before {
    width: 656px;
    height: 396;
    left: -356px;
    top: -32px;
  }
  .lesson01 .img-box02 .white-wrap {
    padding: 21px 15px 9px;
  }
  .lesson01 .img-box02 .image {
    margin-bottom: 13px;
  }
  .lesson01 .img-box02 .image img {
    width: auto;
  }
  .lesson01 .img-box02 .note {
    margin: 0 -5px 0 auto;
    width: fit-content;
    max-width: initial;
    font-size: 7.5px;
    line-height: 1.44;
  }
  .lesson01 .img-box02 .note a:hover {
    text-decoration: none;
  }
  .lesson01 .img-box02 .enlarge {
    margin-top: 7px;
  }
}
.lesson01 .img-box03 {
  margin-bottom: min(3.518vw, 45px);
  position: relative;
}
.lesson01 .img-box03::before {
  content: "";
  width: min(102.58vw, 1312px);
  height: min(61.923vw, 792px);
  position: absolute;
  right: max(-84.91vw, -1086px);
  top: max(-6.489vw, -83px);
  background: url(/conts/it-career-labo/img/lesson01/bg02.png) no-repeat center center/100%;
  z-index: -1;
}
.lesson01 .img-box03 .white-wrap {
  padding: min(54px, 4.222vw) min(36px, 2.815vw) min(57px, 4.457vw) min(35px, 2.737vw);
  position: relative;
}
.lesson01 .img-box03 .c-heading02 {
  margin-bottom: min(4.3vw, 55px);
}
@media (max-width: 599px) {
  .lesson01 .img-box03 {
    margin-bottom: 15px;
  }
  .lesson01 .img-box03::before {
    width: 656px;
    height: 396px;
    right: -482px;
    top: -55px;
  }
  .lesson01 .img-box03 .white-wrap {
    padding: 27px 15px 7px;
  }
  .lesson01 .img-box03 .c-heading02 {
    margin-bottom: 18px;
  }
  .lesson01 .img-box03 .enlarge {
    margin-top: -4px;
  }
}
.lesson01 .img-box04 {
  margin-bottom: min(3.284vw, 42px);
  position: relative;
}
.lesson01 .img-box04::before {
  content: "";
  width: min(102.58vw, 1312px);
  height: min(61.923vw, 792px);
  position: absolute;
  left: max(-49.492vw, -633px);
  top: min(0.625vw, 8px);
  background: url(/conts/it-career-labo/img/lesson01/bg02.png) no-repeat center center/100%;
  z-index: -1;
}
.lesson01 .img-box04 .white-wrap {
  padding: min(4.457vw, 57px) min(3.362vw, 43px) min(4.066vw, 52px);
  position: relative;
}
.lesson01 .img-box04 .c-heading02 {
  margin-bottom: min(3.675vw, 47px);
}
@media (max-width: 599px) {
  .lesson01 .img-box04 {
    margin-bottom: 14px;
  }
  .lesson01 .img-box04::before {
    width: 656px;
    height: 396px;
    left: -411px;
    top: -48px;
  }
  .lesson01 .img-box04 .white-wrap {
    padding: 24px 15px 8px;
  }
  .lesson01 .img-box04 .c-heading02 {
    margin-bottom: 24px;
  }
  .lesson01 .img-box04 .enlarge {
    margin-top: 12px;
  }
}
.lesson01 .img-box05 {
  margin-bottom: min(3.206vw, 41px);
  position: relative;
}
.lesson01 .img-box05::before {
  content: "";
  width: min(102.58vw, 1312px);
  height: min(61.923vw, 792px);
  position: absolute;
  right: max(-84.91vw, -1086px);
  top: min(9.539vw, 122px);
  background: url(/conts/it-career-labo/img/lesson01/bg02.png) no-repeat center center/100%;
  z-index: -1;
}
.lesson01 .img-box05 .white-wrap {
  padding: min(4.457vw, 57px) min(3.362vw, 43px) min(3.44vw, 44px);
  position: relative;
}
.lesson01 .img-box05 .c-heading02 {
  margin-bottom: min(3.362vw, 43px);
}
@media (max-width: 599px) {
  .lesson01 .img-box05 {
    margin-bottom: 20px;
  }
  .lesson01 .img-box05::before {
    width: 656px;
    height: 396px;
    right: -482px;
    top: 9px;
  }
  .lesson01 .img-box05 .white-wrap {
    padding: 25px 15px 10px;
    border-radius: 12px;
  }
  .lesson01 .img-box05 .c-heading02 {
    margin-bottom: 20px;
  }
  .lesson01 .img-box05 .enlarge {
    margin: 9px 3px 0;
  }
}
.lesson01 .img-box06 {
  margin-bottom: 15px;
  position: relative;
}
.lesson01 .img-box06::before {
  content: "";
  width: min(102.58vw, 1312px);
  height: min(61.923vw, 792px);
  position: absolute;
  left: max(-42.064vw, -538px);
  top: max(-0.704vw, -9px);
  background: url(/conts/it-career-labo/img/lesson01/bg02.png) no-repeat center center/100%;
  z-index: -1;
}
.lesson01 .img-box06 .white-wrap {
  padding: min(4.457vw, 57px) min(2.737vw, 35px) min(2.893vw, 37px);
  position: relative;
}
.lesson01 .img-box06 .c-heading02 {
  margin-bottom: min(2.658vw, 34px);
}
@media (max-width: 599px) {
  .lesson01 .img-box06 {
    margin-bottom: 11px;
  }
  .lesson01 .img-box06::before {
    width: 656px;
    height: 396px;
    left: -411px;
    top: -134px;
  }
  .lesson01 .img-box06 .white-wrap {
    padding: 24px 15px 7px;
    border-radius: 12px;
  }
  .lesson01 .img-box06 .c-heading02 {
    margin-bottom: 18px;
  }
  .lesson01 .img-box06 .enlarge {
    margin: 12px 4px 0;
  }
}
.lesson01 .img-box07 {
  display: flex;
  align-items: center;
  gap: min(3.127vw, 40px);
}
.lesson01 .img-box07 .white-wrap {
  width: min(50.977vw, 652px);
  padding: min(3.284vw, 42px) min(4.066vw, 52px) min(4.691vw, 60px);
}
.lesson01 .img-box07 .white-wrap .c-heading02 {
  margin-bottom: min(4.144vw, 53px);
  line-height: 1.25;
}
.lesson01 .img-box07 .txt-box {
  margin: min(1.407vw, 18px) min(0.469vw, 6px) 0;
  flex: 1;
}
@media (max-width: 599px) {
  .lesson01 .img-box07 {
    display: block;
  }
  .lesson01 .img-box07 .white-wrap {
    width: auto;
    padding: 21px 15px 10px;
  }
  .lesson01 .img-box07 .white-wrap .c-heading02 {
    margin-bottom: 22px;
  }
  .lesson01 .img-box07 .txt-box {
    margin: 23px 0 0;
  }
  .lesson01 .img-box07 .txt-box p {
    margin-bottom: 19px;
  }
  .lesson01 .img-box07 .enlarge {
    margin: 14px 3px 0;
  }
}
.lesson01 .sec-box {
  background: url(/conts/it-career-labo/img/lesson01/bg01.jpg) no-repeat center center/cover;
}
.lesson01 .sec01 {
  padding: min(7.897vw, 101px) 0 min(21.501vw, 275px);
}
@media (max-width: 599px) {
  .lesson01 .sec01 {
    padding: 50px 0 110px;
  }
}
.lesson01 .sec02 {
  padding-bottom: min(20.641vw, 264px);
}
.lesson01 .sec02 .ttl-box {
  margin-bottom: min(5.004vw, 64px);
}
.lesson01 .sec02 .c-heading01 {
  margin-bottom: min(2.815vw, 36px);
}
@media (max-width: 599px) {
  .lesson01 .sec02 {
    padding-bottom: 148px;
  }
  .lesson01 .sec02 .ttl-box {
    margin-bottom: 20px;
  }
  .lesson01 .sec02 .c-heading01 {
    margin-bottom: 18px;
  }
}
.lesson01 .sec03 {
  padding-top: min(11.181vw, 143px);
  padding-bottom: min(16.028vw, 205px);
}
.lesson01 .sec03 .c-heading01 {
  margin-bottom: min(4.066vw, 52px);
}
.lesson01 .sec03 .ttl-box {
  margin-bottom: min(4.691vw, 60px);
}
.lesson01 .sec03 .txt-box p {
  letter-spacing: 0.06em;
}
@media (max-width: 599px) {
  .lesson01 .sec03 {
    padding-top: 67px;
    padding-bottom: 85px;
  }
  .lesson01 .sec03 .c-heading01 {
    margin-bottom: 28px;
  }
  .lesson01 .sec03 .ttl-box {
    margin-bottom: 20px;
  }
  .lesson01 .sec03 .txt-box p {
    font-size: 12px;
  }
}

@media (max-width: 599px) {
  .lesson02 .page-lead {
    top: 0;
  }
  .lesson02 .page-lead img {
    height: 27px;
  }
}
.lesson02 .page-title__bg {
  background: radial-gradient(50% 92.73%, rgb(66, 209, 226) 0%, rgb(38, 191, 211) 40.51%, rgb(0, 166, 191) 100%);
}
@media (max-width: 599px) {
  .lesson02 .page-title__bg {
    background: radial-gradient(50% 92.73% at 65% 50%, rgb(66, 209, 226) 0%, rgb(38, 191, 211) 40.51%, rgb(0, 166, 191) 100%);
    background-size: 130% 100%;
  }
}
.lesson02 .page-title__bg::after {
  background-image: url(/conts/it-career-labo/img/lesson02/bg03.png);
  background-size: min(38.546vw, 493px);
  background-position: right max(1.173vw, 15px) bottom max(-1.251vw, -16px);
}
@media (max-width: 599px) {
  .lesson02 .page-title__bg::after {
    background-size: 244px;
    background-position: right 1px bottom -15px;
  }
}
.lesson02 .page-title__img {
  width: min(29.789vw, 381px);
  margin-left: min(11.572vw, 148px);
  bottom: max(-3.753vw, -48px);
}
@media (max-width: 599px) {
  .lesson02 .page-title__img {
    width: 190px;
    bottom: -25px;
    left: 58%;
    margin-left: 0;
  }
}
.lesson02 .intro,
.lesson02 .conclusion,
.lesson02 .c-heading02,
.lesson02 .c-heading03 {
  color: #00A3BC;
}
@media (min-width: 600px) {
  .lesson02 .intro {
    margin-bottom: min(7.037vw, 90px);
  }
  .lesson02 .intro__inner {
    padding-top: min(2.189vw, 28px);
  }
  .lesson02 .intro__text {
    letter-spacing: -0.04em;
    margin-right: max(-1.564vw, -20px);
  }
}
@media (min-width: 600px) {
  .lesson02 .conclusion {
    padding-top: min(9.851vw, 126px);
  }
  .lesson02 .conclusion__text {
    letter-spacing: -0.04em;
  }
}
@media (max-width: 599px) {
  .lesson02 .conclusion__ttl {
    margin-bottom: 10px;
  }
  .lesson02 .conclusion__ttl-img {
    top: -46px;
  }
}
.lesson02 .sec-box {
  background: url(/conts/it-career-labo/img/lesson02/bg01.png) no-repeat center center/cover;
}
.lesson02 .sec-box .content::before {
  width: min(72.713vw, 930px);
  position: absolute;
  left: max(-46.912vw, -600px);
  top: max(-14.386vw, -184px);
  aspect-ratio: 930/731;
  background: url(/conts/it-career-labo/img/lesson02/bg02.png) no-repeat center top/100%;
  content: "";
  z-index: -1;
}
@media (max-width: 599px) {
  .lesson02 .sec-box .content::before {
    width: 366px;
    left: -230px;
    top: -89px;
  }
}
.lesson02 .sec-box .ttl-box {
  margin-bottom: min(3.518vw, 45px);
}
.lesson02 .sec-box .ttl-box p {
  margin-bottom: min(3.284vw, 42px);
}
@media (max-width: 599px) {
  .lesson02 .sec-box .ttl-box {
    margin-bottom: 21px;
  }
  .lesson02 .sec-box .ttl-box p {
    margin-bottom: 24px;
  }
}
.lesson02 .sec01 {
  padding-top: min(9.226vw, 118px);
  padding-bottom: min(14.073vw, 180px);
}
.lesson02 .sec01 .c-heading01 {
  margin-bottom: min(3.44vw, 44px);
}
.lesson02 .sec01 .img-box01 {
  padding: min(4.066vw, 52px) min(2.893vw, 37px) min(4.222vw, 54px);
}
.lesson02 .sec01 .img-box01 .c-heading02 {
  margin-bottom: min(3.909vw, 50px);
}
.lesson02 .sec01 .img-box01 .image img {
  width: min(61.767vw, 790px);
}
@media (max-width: 599px) {
  .lesson02 .sec01 {
    padding-top: 76px;
    padding-bottom: 87px;
  }
  .lesson02 .sec01 .c-heading01 {
    margin-bottom: 28px;
  }
  .lesson02 .sec01 .img-box01 {
    padding: 19px 15px 10px;
  }
  .lesson02 .sec01 .img-box01 .c-heading02 {
    margin-bottom: 14px;
    line-height: 1.2;
  }
  .lesson02 .sec01 .img-box01 .image img {
    width: auto;
  }
  .lesson02 .sec01 .img-box01 .enlarge {
    margin-top: 12px;
  }
}
.lesson02 .sec02 {
  padding-top: min(10.633vw, 136px);
  padding-bottom: min(17.201vw, 220px);
}
.lesson02 .sec02 .content::before {
  display: none;
}
.lesson02 .sec02 .c-heading01 {
  margin-bottom: min(2.815vw, 36px);
}
.lesson02 .sec02 .ttl-box {
  margin-bottom: min(3.675vw, 47px);
}
.lesson02 .sec02 .img-box02 {
  margin-bottom: min(2.893vw, 37px);
  position: relative;
}
.lesson02 .sec02 .img-box02::before {
  width: min(72.713vw, 930px);
  position: absolute;
  right: max(-10.633vw, -136px);
  top: max(-28.616vw, -366px);
  aspect-ratio: 930/731;
  background: url(/conts/it-career-labo/img/lesson02/bg02.png) no-repeat center top/100%;
  content: "";
  z-index: -1;
}
@media (max-width: 599px) {
  .lesson02 .sec02 .img-box02::before {
    width: 366px;
    right: -38px;
    top: -236px;
  }
}
.lesson02 .sec02 .img-box02 .white-wrap {
  padding: min(4.222vw, 54px) min(2.346vw, 30px) min(3.127vw, 40px);
  position: relative;
}
.lesson02 .sec02 .img-box02 .image01 {
  margin-bottom: min(5.942vw, 76px);
}
.lesson02 .sec02 .txt-box {
  margin-bottom: min(57px, 4.457vw);
}
.lesson02 .sec02 .img-box03 {
  padding: min(54px, 4.222vw) min(40px, 3.127vw) min(35px, 2.737vw);
}
.lesson02 .sec02 .img-box03 .c-heading02 {
  margin-bottom: min(33px, 2.58vw);
}
.lesson02 .sec02 .img-box03 p {
  margin: min(2.658vw, 34px) min(0.782vw, 10px) 0;
  font-size: min(1.173vw, 15px);
  letter-spacing: 0.005em;
  line-height: 1.5;
}
@media (min-width: 600px) {
  .lesson02 .sec02 .img-box03 p a {
    text-decoration: none;
  }
  .lesson02 .sec02 .img-box03 p a:hover {
    text-decoration: underline;
  }
}
@media (max-width: 599px) {
  .lesson02 .sec02 {
    padding-top: 59px;
    padding-bottom: 86px;
  }
  .lesson02 .sec02 .c-heading01 {
    margin-bottom: 26px;
  }
  .lesson02 .sec02 .ttl-box {
    margin-bottom: 22px;
  }
  .lesson02 .sec02 .ttl-box p {
    letter-spacing: 0.06em;
  }
  .lesson02 .sec02 .img-box02 {
    margin-bottom: 20px;
  }
  .lesson02 .sec02 .img-box02 .white-wrap {
    padding: 17px 15px 16px;
  }
  .lesson02 .sec02 .img-box02 .c-heading02 {
    margin-bottom: 12px;
  }
  .lesson02 .sec02 .img-box02 .enlarge {
    margin-top: 14px;
  }
  .lesson02 .sec02 .img-box02 .image01 {
    margin-bottom: 23px;
  }
  .lesson02 .sec02 .img-box02 .image01 .enlarge {
    margin: 9px 2px 0;
  }
  .lesson02 .sec02 .txt-box {
    margin-bottom: 19px;
  }
  .lesson02 .sec02 .img-box03 {
    padding: 17px 15px 18px;
  }
  .lesson02 .sec02 .img-box03 .c-heading02 {
    margin-bottom: 18px;
  }
  .lesson02 .sec02 .img-box03 p {
    margin: 10px 5px 0;
    font-size: 7.5px;
  }
  .lesson02 .sec02 .img-box03 p a {
    text-decoration: none;
  }
  .lesson02 .sec02 .img-box03 .enlarge {
    margin-top: 8px;
  }
}
.lesson02 .sec03 {
  padding-top: min(143px, 11.181vw);
  padding-bottom: min(19.234vw, 246px);
}
@media (min-width: 600px) {
  .lesson02 .sec03 .content::before {
    left: max(-680px, -53.167vw);
    top: max(-15.403vw, -197px);
  }
}
.lesson02 .sec03 .c-heading01 {
  margin-bottom: min(53px, 4.144vw);
}
.lesson02 .sec03 .ttl-box {
  margin-bottom: min(49px, 3.831vw);
}
.lesson02 .sec03 .img-box04 {
  margin-bottom: min(27px, 2.111vw);
  padding: min(58px, 4.535vw) min(40px, 3.127vw) min(58px, 4.535vw);
}
.lesson02 .sec03 .img-box04 .c-heading02 {
  margin-bottom: min(3.284vw, 42px);
}
.lesson02 .sec03 .img-box04 p {
  margin-bottom: min(1.251vw, 16px);
  font-size: min(1.407vw, 18px);
}
.lesson02 .sec03 .img-box04 .image {
  margin: 0 max(-0.391vw, -5px) 0 max(-0.469vw, -6px);
}
.lesson02 .sec03 .img-box05 {
  padding: min(59px, 4.613vw) min(44px, 3.44vw) min(58px, 4.535vw);
}
.lesson02 .sec03 .img-box05 .c-heading02 {
  margin-bottom: min(3.909vw, 50px);
  display: flex;
  align-items: flex-start;
  gap: min(2.658vw, 34px);
}
.lesson02 .sec03 .img-box05 .c-heading02 .num {
  margin: min(0.547vw, 7px) 0 0 min(0.235vw, 3px);
  width: min(17.201vw, 220px);
  flex-shrink: 0;
  line-height: 0;
}
.lesson02 .sec03 .img-box05 .txt-box {
  margin: -4px 0 0;
  flex: 1;
}
.lesson02 .sec03 .img-box05 .txt-box p {
  font-size: min(1.407vw, 18px);
  line-height: 1.85;
  letter-spacing: 0.12em;
}
.lesson02 .sec03 .img-box05 .sub01 {
  margin-right: min(0.391vw, 5px);
  margin-bottom: min(2.893vw, 37px);
  display: flex;
  gap: min(4.378vw, 56px);
}
.lesson02 .sec03 .img-box05 .sub01 .image {
  width: min(43.237vw, 553px);
}
.lesson02 .sec03 .img-box05 .sub02 {
  margin-right: min(0.391vw, 5px);
  margin-bottom: min(2.893vw, 37px);
  display: flex;
  gap: min(3.127vw, 40px);
}
.lesson02 .sec03 .img-box05 .sub02 .image {
  width: min(48.241vw, 617px);
}
.lesson02 .sec03 .img-box05 .sub03 {
  margin-right: min(0.391vw, 5px);
  display: flex;
  gap: min(3.127vw, 40px);
}
.lesson02 .sec03 .img-box05 .sub03 .image {
  width: min(52.385vw, 670px);
}
@media (max-width: 599px) {
  .lesson02 .sec03 {
    padding-top: 76px;
    padding-bottom: 58px;
  }
  .lesson02 .sec03 .c-heading01 {
    margin-bottom: 25px;
    margin-right: -10px;
    letter-spacing: -0.07em;
  }
  .lesson02 .sec03 .ttl-box {
    margin-bottom: 21px;
  }
  .lesson02 .sec03 .img-box04 {
    margin-bottom: 10px;
    padding: 18px 15px 13px;
  }
  .lesson02 .sec03 .img-box04 .c-heading02 {
    margin-bottom: 14px;
    line-height: 1.26;
  }
  .lesson02 .sec03 .img-box04 p {
    margin-bottom: 19px;
    font-size: 12px;
    line-height: 1.4;
  }
  .lesson02 .sec03 .img-box04 .image {
    margin: 0 -4px 13px -3px;
  }
  .lesson02 .sec03 .img-box05 {
    padding: 24px 15px 15px;
  }
  .lesson02 .sec03 .img-box05 .c-heading02 {
    margin: 0 4px 19px;
    line-height: 1.26;
    display: block;
  }
  .lesson02 .sec03 .img-box05 .c-heading02 .num {
    margin: 0 0 20px;
    width: 140px;
    display: block;
  }
  .lesson02 .sec03 .img-box05 .txt-box {
    margin: 0 4px 17px;
  }
  .lesson02 .sec03 .img-box05 .txt-box p {
    font-size: 11px;
    line-height: 1.6;
    letter-spacing: 0.09em;
  }
  .lesson02 .sec03 .img-box05 .sub01 {
    margin: 0 0 22px;
    display: block;
  }
  .lesson02 .sec03 .img-box05 .sub01 .image {
    width: auto;
  }
  .lesson02 .sec03 .img-box05 .sub01 .enlarge {
    margin-top: 11px;
  }
  .lesson02 .sec03 .img-box05 .sub02 {
    margin: 0 0 20px;
    display: block;
  }
  .lesson02 .sec03 .img-box05 .sub02 .image {
    width: auto;
  }
  .lesson02 .sec03 .img-box05 .sub02 .enlarge {
    margin-top: 11px;
  }
  .lesson02 .sec03 .img-box05 .sub03 {
    margin: 0;
    display: block;
  }
  .lesson02 .sec03 .img-box05 .sub03 .image {
    width: auto;
  }
  .lesson02 .sec03 .img-box05 .sub03 .enlarge {
    margin-top: 14px;
  }
}

@media (max-width: 599px) {
  .lesson03 .page-lead {
    top: 0;
  }
  .lesson03 .page-lead img {
    height: 27px;
  }
}
.lesson03 .page-title__bg {
  background: radial-gradient(50% 92.73%, rgb(131, 186, 255) 0%, rgb(62, 87, 144) 100%);
}
@media (max-width: 599px) {
  .lesson03 .page-title__bg {
    background: radial-gradient(50% 100% at 63% 50%, rgb(131, 186, 255) 0%, rgb(62, 87, 144) 100%);
    background-size: 130% 100%;
  }
}
.lesson03 .page-title__bg::after {
  background-image: url(/conts/it-career-labo/img/lesson03/bg03.png);
  background-size: min(37.06vw, 474px) auto;
  background-position: right max(-9.617vw, -123px) bottom max(-21.032vw, -269px);
}
@media (max-width: 599px) {
  .lesson03 .page-title__bg::after {
    background-size: 238px auto;
    background-position: right -106px bottom -72px;
  }
}
@media (min-width: 600px) {
  .lesson03 .page-title__img {
    width: min(16.263vw, 208px);
    margin-left: min(25.332vw, 324px);
    bottom: min(-1.642vw, -21px);
  }
}
@media (max-width: 599px) {
  .lesson03 .page-title__img {
    width: 104px;
    bottom: -3px;
    left: 65.8%;
  }
}
.lesson03 .intro,
.lesson03 .conclusion,
.lesson03 .c-heading02,
.lesson03 .c-heading03 {
  color: #3E5790;
}
@media (min-width: 600px) {
  .lesson03 .intro {
    margin-bottom: min(7.115vw, 91px);
  }
  .lesson03 .intro__inner {
    padding-top: min(2.189vw, 28px);
  }
}
@media (min-width: 600px) {
  .lesson03 .conclusion {
    padding-top: min(9.461vw, 121px);
  }
  .lesson03 .conclusion__text {
    letter-spacing: -0.03em;
  }
}
@media (max-width: 599px) {
  .lesson03 .conclusion {
    padding-top: 57px;
  }
  .lesson03 .conclusion__ttl {
    margin-bottom: 12px;
  }
  .lesson03 .conclusion__ttl-img {
    top: -44px;
  }
}
.lesson03 .sec-box {
  background: url(/conts/it-career-labo/img/lesson03/bg01.jpg) no-repeat center center/cover;
}
.lesson03 .sec-box .content::before {
  width: min(47.615vw, 609px);
  height: auto;
  position: absolute;
  right: max(-22.127vw, -283px);
  top: min(35.262vw, 451px);
  aspect-ratio: 609/696;
  background: url(/conts/it-career-labo/img/lesson03/bg02.png) no-repeat left top/100%;
  content: "";
  z-index: -1;
}
@media (max-width: 599px) {
  .lesson03 .sec-box .content::before {
    width: 304px;
    right: -152px;
    top: 232px;
  }
}
.lesson03 .sec01 {
  padding-top: min(9.226vw, 118px);
  padding-bottom: min(18.139vw, 232px);
}
.lesson03 .sec01 .c-heading01 {
  margin-bottom: min(4.769vw, 61px);
}
.lesson03 .sec01 .ttl-box {
  margin-bottom: min(3.753vw, 48px);
}
.lesson03 .sec01 .ttl-box p {
  letter-spacing: 0.03em;
}
.lesson03 .sec01 .white-wrap {
  padding: min(56px, 4.378vw) min(43px, 3.362vw) min(92px, 7.193vw);
}
.lesson03 .sec01 .img-list01 {
  margin: 0 2px min(4.457vw, 57px) 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: min(3.127vw, 40px) 0;
}
.lesson03 .sec01 .img-list01 li {
  width: 46.55%;
}
.lesson03 .sec01 .img-list01 li .photo {
  margin-bottom: min(3.284vw, 42px);
}
.lesson03 .sec01 .img-list01 li .photo img {
  width: 100%;
}
.lesson03 .sec01 .img-list01 li .ttl {
  margin-bottom: min(1.251vw, 16px);
  color: #3E5790;
  font-weight: normal;
  font-size: min(3.675vw, 47px);
  line-height: 1.2;
}
.lesson03 .sec01 .img-list01 li p {
  color: #3E5790;
  font-size: min(1.876vw, 24px);
  line-height: 1.75;
  letter-spacing: 0.03em;
}
.lesson03 .sec01 .text01 {
  margin-bottom: min(4.691vw, 60px);
}
.lesson03 .sec01 .img-list02 {
  margin: 0 3px;
  display: flex;
  flex-direction: column;
  gap: min(3.518vw, 45px);
}
.lesson03 .sec01 .img-list02 li {
  width: 100%;
  display: flex;
  gap: min(2.58vw, 33px);
}
.lesson03 .sec01 .img-list02 li .photo {
  width: min(15.637vw, 200px);
}
.lesson03 .sec01 .img-list02 li .txt-wrap {
  margin-top: 3px;
  flex: 1;
  word-break: break-all;
}
.lesson03 .sec01 .img-list02 li .txt-wrap p {
  margin-bottom: min(0.938vw, 12px);
  letter-spacing: 0.06em;
}
.lesson03 .sec01 .img-list02 li .txt-wrap .note {
  font-size: min(1.329vw, 17px);
  letter-spacing: 0;
}
.lesson03 .sec01 .img-list02 li .txt-wrap .note a {
  text-decoration: none;
}
@media (min-width: 600px) {
  .lesson03 .sec01 .img-list02 li .txt-wrap .note a:hover {
    text-decoration: underline;
  }
}
@media (max-width: 599px) {
  .lesson03 .sec01 {
    padding-top: 54px;
    padding-bottom: 93px;
  }
  .lesson03 .sec01 .c-heading01 {
    margin-bottom: 22px;
  }
  .lesson03 .sec01 .ttl-box {
    margin-bottom: 20px;
  }
  .lesson03 .sec01 .white-wrap {
    padding: 19px;
  }
  .lesson03 .sec01 .c-heading02 {
    margin-bottom: 20px;
    line-height: 1.2;
  }
  .lesson03 .sec01 .img-list01 {
    margin: 0 auto 35px;
    width: 78.05%;
    gap: 15px;
  }
  .lesson03 .sec01 .img-list01 li {
    width: 100%;
  }
  .lesson03 .sec01 .img-list01 li .photo {
    margin-bottom: 21px;
  }
  .lesson03 .sec01 .img-list01 li .photo img {
    width: 100%;
  }
  .lesson03 .sec01 .img-list01 li .ttl {
    margin-bottom: 8px;
    font-size: 23px;
  }
  .lesson03 .sec01 .img-list01 li p {
    font-size: 12px;
  }
  .lesson03 .sec01 .text01 {
    margin-bottom: 29px;
    font-size: 12px;
    line-height: 1.43;
  }
  .lesson03 .sec01 .img-list02 {
    margin: 0;
    gap: 18px;
  }
  .lesson03 .sec01 .img-list02 li {
    flex-direction: column;
    align-items: center;
    gap: 14px;
  }
  .lesson03 .sec01 .img-list02 li .photo {
    width: 100px;
  }
  .lesson03 .sec01 .img-list02 li .txt-wrap {
    margin-top: 0;
    width: 100%;
  }
  .lesson03 .sec01 .img-list02 li .txt-wrap p {
    margin-bottom: 10px;
    font-size: 12px;
    letter-spacing: 0;
  }
  .lesson03 .sec01 .img-list02 li .txt-wrap .note {
    font-size: 8.5px;
    line-height: 1.35;
  }
}
.lesson03 .sec02 {
  padding-top: min(10.633vw, 136px);
  padding-bottom: min(18.296vw, 234px);
}
.lesson03 .sec02 .content::before {
  right: auto;
  left: min(-25.02vw, -320px);
  top: min(23.69vw, 303px);
}
@media (max-width: 599px) {
  .lesson03 .sec02 .content::before {
    left: -152px;
    top: 282px;
  }
}
.lesson03 .sec02 .c-heading01 {
  margin-bottom: min(2.737vw, 35px);
}
.lesson03 .sec02 .ttl-box {
  margin-bottom: min(4.457vw, 57px);
}
.lesson03 .sec02 .c-heading02 {
  margin-bottom: min(5.317vw, 68px);
}
.lesson03 .sec02 .c-heading02 .sml-txt {
  font-size: min(2.033vw, 26px);
}
.lesson03 .sec02 .image01 {
  margin-bottom: min(4.144vw, 53px);
}
.lesson03 .sec02 .white-wrap {
  margin-bottom: min(3.362vw, 43px);
  padding: min(4.222vw, 54px) min(3.049vw, 39px) min(5.551vw, 71px);
}
.lesson03 .sec02 .white-wrap p {
  margin-bottom: min(4.378vw, 56px);
}
@media (max-width: 599px) {
  .lesson03 .sec02 {
    padding-top: 59px;
    padding-bottom: 100px;
  }
  .lesson03 .sec02 .c-heading01 {
    margin-bottom: 27px;
  }
  .lesson03 .sec02 .ttl-box {
    margin-bottom: 24px;
  }
  .lesson03 .sec02 .c-heading02 {
    margin-bottom: 19px;
    line-height: 1.2;
  }
  .lesson03 .sec02 .c-heading02 .sml-txt {
    font-size: inherit;
  }
  .lesson03 .sec02 .image01 {
    margin: 0 -7px 18px -6px;
  }
  .lesson03 .sec02 .image01 .enlarge {
    margin: 17px 0 0;
  }
  .lesson03 .sec02 .white-wrap {
    margin-bottom: 20px;
    padding: 18px 18px 23px;
  }
  .lesson03 .sec02 .white-wrap p {
    margin-bottom: 19px;
    font-size: 12px;
    line-height: 1.4;
  }
  .lesson03 .sec02 .image02 {
    margin: 0 -7px 15px -6px;
  }
}
.lesson03 .sec03 {
  padding-top: min(11.259vw, 144px);
  padding-bottom: min(16.732vw, 214px);
}
.lesson03 .sec03 .content::before {
  top: min(7.584vw, 97px);
}
@media (max-width: 599px) {
  .lesson03 .sec03 .content::before {
    top: 188px;
  }
}
.lesson03 .sec03 .c-heading01 {
  margin-bottom: min(4.066vw, 52px);
}
.lesson03 .sec03 .ttl-box {
  margin-bottom: min(3.675vw, 47px);
}
.lesson03 .sec03 .white-wrap {
  padding: min(4.457vw, 57px) min(3.362vw, 43px) min(5.16vw, 66px);
}
.lesson03 .sec03 .c-heading02 {
  margin-bottom: min(4.3vw, 55px);
}
.lesson03 .sec03 .image {
  margin-bottom: min(5.317vw, 68px);
}
.lesson03 .sec03 .check-box {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}
.lesson03 .sec03 .check-box .sub01 {
  width: 29.6%;
  position: relative;
}
.lesson03 .sec03 .check-box .sub01::before {
  width: min(3.753vw, 48px);
  height: min(3.753vw, 48px);
  position: absolute;
  left: 0;
  top: 0;
  border-left: 1px dashed #3E5790;
  border-top: 1px dashed #3E5790;
  box-sizing: border-box;
  content: "";
}
.lesson03 .sec03 .check-box .sub01::after {
  width: min(3.753vw, 48px);
  height: min(3.753vw, 48px);
  position: absolute;
  right: 0;
  top: 0;
  border-right: 1px dashed #3E5790;
  border-top: 1px dashed #3E5790;
  box-sizing: border-box;
  content: "";
}
.lesson03 .sec03 .check-box .sub01__wrap {
  padding: min(0.782vw, 10px) min(0.782vw, 10px) min(1.173vw, 15px);
  min-height: min(18.765vw, 240px);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lesson03 .sec03 .check-box .sub01__wrap::before {
  width: min(3.753vw, 48px);
  height: min(3.753vw, 48px);
  position: absolute;
  left: 0;
  bottom: 0;
  border-left: 1px dashed #3E5790;
  border-bottom: 1px dashed #3E5790;
  box-sizing: border-box;
  content: "";
}
.lesson03 .sec03 .check-box .sub01__wrap::after {
  width: min(3.753vw, 48px);
  height: min(3.753vw, 48px);
  position: absolute;
  right: 0;
  bottom: 0;
  border-right: 1px dashed #3E5790;
  border-bottom: 1px dashed #3E5790;
  box-sizing: border-box;
  content: "";
}
.lesson03 .sec03 .check-box .sub01__wrap p {
  text-align: center;
  color: #3E5790;
  font-size: min(2.189vw, 28px);
  font-family: inherit;
  line-height: 1.23;
  letter-spacing: 0;
}
.lesson03 .sec03 .check-box .sub01 .imgtext {
  width: min(6.724vw, 86px);
  position: absolute;
  left: 50%;
  top: max(-1.407vw, -18px);
  transform: translateX(-50%);
}
.lesson03 .sec03 .check-box .sub02 {
  margin-top: max(-0.782vw, -10px);
  width: 65.2%;
}
.lesson03 .sec03 .check-box .sub02 p {
  margin-bottom: min(1.876vw, 24px);
  font-size: min(1.72vw, 22px);
  letter-spacing: 0.07em;
}
.lesson03 .sec03 .check-box .sub02 .p-btn {
  margin: 0;
  width: 100%;
  max-width: 615px;
}
.lesson03 .sec03 .check-box .sub02 .p-btn a {
  justify-content: flex-start;
}
@media (max-width: 599px) {
  .lesson03 .sec03 {
    padding-top: 54px;
    padding-bottom: 96px;
  }
  .lesson03 .sec03 .c-heading01 {
    margin-bottom: 21px;
    margin-right: -10px;
    letter-spacing: -0.03em;
  }
  .lesson03 .sec03 .c-heading01 .txt01 {
    text-indent: -0.5em;
    letter-spacing: -0.09em;
  }
  .lesson03 .sec03 .ttl-box {
    margin-bottom: 27px;
  }
  .lesson03 .sec03 .ttl-box p {
    letter-spacing: 0.03em;
  }
  .lesson03 .sec03 .white-wrap {
    padding: 18px 15px 27px;
  }
  .lesson03 .sec03 .c-heading02 {
    margin-bottom: 21px;
  }
  .lesson03 .sec03 .image {
    margin-bottom: 13px;
  }
  .lesson03 .sec03 .check-box {
    margin: 25px 2px 0;
    display: block;
  }
  .lesson03 .sec03 .check-box .sub01 {
    margin: 0 0 14px;
    width: auto;
  }
  .lesson03 .sec03 .check-box .sub01::before {
    width: 24px;
    height: 24px;
  }
  .lesson03 .sec03 .check-box .sub01::after {
    width: 24px;
    height: 24px;
  }
  .lesson03 .sec03 .check-box .sub01__wrap {
    padding: 10px 10px 15px;
    min-height: 66px;
  }
  .lesson03 .sec03 .check-box .sub01__wrap::before {
    width: 24px;
    height: 24px;
  }
  .lesson03 .sec03 .check-box .sub01__wrap::after {
    width: 24px;
    height: 24px;
  }
  .lesson03 .sec03 .check-box .sub01__wrap p {
    font-size: 15px;
  }
  .lesson03 .sec03 .check-box .sub01 .imgtext {
    width: 43px;
    top: -20px;
    margin-left: -5px;
  }
  .lesson03 .sec03 .check-box .sub02 {
    margin-top: 0;
    width: auto;
  }
  .lesson03 .sec03 .check-box .sub02 p {
    margin-bottom: 19px;
    font-size: 12px;
    line-height: 1.45;
  }
  .lesson03 .sec03 .check-box .sub02 .p-btn {
    margin: 0 auto;
    max-width: 310px;
  }
  .lesson03 .sec03 .check-box .sub02 .p-btn a {
    padding-left: 45px;
    height: 45px;
    font-size: 16px;
  }
}

@media (max-width: 599px) {
  .lesson04 .page-lead {
    top: -2px;
    right: 16px;
  }
  .lesson04 .page-lead img {
    height: 31px;
  }
}
@media (min-width: 600px) {
  .lesson04 .page-title {
    margin-bottom: min(5.938vw, 76px);
  }
}
.lesson04 .page-title__bg {
  background: radial-gradient(50% 92.73%, #CBA5C5 0%, #9275B8 85%);
}
@media (max-width: 599px) {
  .lesson04 .page-title__bg {
    background: radial-gradient(50% 100% at 63% 50%, #CBA5C5 0%, #9275B8 100%);
    background-size: 130% 100%;
  }
}
.lesson04 .page-title__bg::after {
  background-image: url(/conts/it-career-labo/img/lesson04/bg03.png);
  background-size: min(39.14vw, 501px) auto;
  background-position: right max(-7.81vw, -100px) bottom max(-11.79vw, -151px);
}
@media (max-width: 599px) {
  .lesson04 .page-title__bg::after {
    background-size: 240px auto;
    background-position: right -66px bottom -58px;
  }
}
@media (min-width: 600px) {
  .lesson04 .page-title__img {
    width: min(28.28vw, 362px);
    margin-left: min(13.5156vw, 173px);
    bottom: min(-3.515vw, -45px);
  }
}
@media (max-width: 599px) {
  .lesson04 .page-title__img {
    width: min(48.267vw, 181px);
    bottom: -27px;
    left: 72%;
  }
}
.lesson04 .intro,
.lesson04 .conclusion,
.lesson04 .c-heading02,
.lesson04 .c-heading03 {
  color: #8069c9;
}
.lesson04 .intro {
  margin-bottom: min(6.953vw, 89px);
}
@media (min-width: 600px) {
  .lesson04 .intro__ttl-img {
    top: max(-8.906vw, -114px);
  }
}
@media (max-width: 599px) {
  .lesson04 .intro {
    margin-bottom: 43px;
  }
  .lesson04 .intro__text {
    font-size: min(3.2vw, 12px);
  }
}
.lesson04 .sec-box {
  background: url(/conts/it-career-labo/img/lesson04/bg01.jpg) no-repeat center center/cover;
}
@media (max-width: 599px) {
  .lesson04 .sec-box {
    padding-top: 54px;
    padding-bottom: 82px;
  }
}
.lesson04 .sec-box .content::before {
  width: min(62.34vw, 798px);
  height: auto;
  position: absolute;
  right: max(-22.6vw, -290px);
  top: min(34.1vw, 436px);
  aspect-ratio: 1596/1549;
  background: url(/conts/it-career-labo/img/lesson04/bg02.png) no-repeat left top/100%;
  content: "";
  z-index: -1;
}
@media (max-width: 599px) {
  .lesson04 .sec-box .content::before {
    width: 399px;
    right: -166px;
    top: 279px;
    aspect-ratio: 798/775;
  }
}
@media (min-width: 600px) {
  .lesson04 .sec-box .c-heading01 {
    margin-bottom: min(4.68vw, 38px);
  }
}
@media (max-width: 599px) {
  .lesson04 .sec-box .c-heading01 {
    margin-bottom: 23px;
  }
}
@media (max-width: 599px) {
  .lesson04 .sec-box .ttl-box {
    margin-bottom: 45px;
  }
}
@media (max-width: 599px) {
  .lesson04 .sec-box .white-wrap p {
    font-size: 12px;
  }
}
@media (min-width: 600px) {
  .lesson04 .sec-box.sec01 {
    padding: min(9.297vw, 119px) 0 min(17.969vw, 230px);
  }
  .lesson04 .sec-box.sec01 .c-heading01 {
    margin-bottom: min(4.688vw, 60px);
  }
  .lesson04 .sec-box.sec01 .ttl-box {
    margin-bottom: min(3.75vw, 48px);
  }
  .lesson04 .sec-box.sec01 .white-wrap01 {
    padding: min(6.172vw, 79px) min(3.516vw, 45px) min(5.625vw, 72px);
  }
  .lesson04 .sec-box.sec01 .white-wrap01 .image01 {
    margin-bottom: min(3.516vw, 45px);
  }
}
@media (max-width: 599px) {
  .lesson04 .sec-box.sec01 .white-wrap01 {
    padding: 30px 17px;
  }
  .lesson04 .sec-box.sec01 .image01 {
    margin-right: -1px;
    margin-bottom: 11px;
  }
  .lesson04 .sec-box.sec01 .image01 .enlarge {
    margin-top: 11px;
    margin-left: -1px;
  }
}
.lesson04 .sec-box.sec02 .content::before {
  right: auto;
  left: max(-27.1vw, -346px);
  top: min(25.5vw, 327px);
}
@media (max-width: 599px) {
  .lesson04 .sec-box.sec02 .content::before {
    left: -137px;
    top: 289px;
  }
}
@media (min-width: 600px) {
  .lesson04 .sec-box.sec02 {
    padding-bottom: min(10.547vw, 135px);
  }
  .lesson04 .sec-box.sec02 .ttl-box {
    margin-bottom: min(4.29vw, 55px);
  }
  .lesson04 .sec-box.sec02 .white-wrap {
    margin-bottom: min(2.5vw, 32px);
    padding: min(4vw, 52px) min(3.515vw, 45px) min(3.516vw, 45px);
  }
  .lesson04 .sec-box.sec02 .white-wrap .c-heading02 {
    margin-bottom: min(3.906vw, 50px);
    font-size: min(3.66vw, 46.92px);
  }
  .lesson04 .sec-box.sec02 .white-wrap .img-box {
    display: flex;
    justify-content: space-between;
  }
  .lesson04 .sec-box.sec02 .white-wrap .img-box .left {
    width: 46.5%;
  }
  .lesson04 .sec-box.sec02 .white-wrap .img-box .left .photo {
    margin-bottom: 30px;
  }
  .lesson04 .sec-box.sec02 .white-wrap .img-box .left p {
    margin-bottom: 15px;
    letter-spacing: -0.4px;
  }
  .lesson04 .sec-box.sec02 .white-wrap .img-box .left p:last-child {
    margin-bottom: 0;
  }
  .lesson04 .sec-box.sec02 .white-wrap .img-box .left .notes {
    margin-right: max(-3.125vw, -40px);
    font-size: min(1.328vw, 17px);
  }
  .lesson04 .sec-box.sec02 .white-wrap .img-box .left .notes li {
    display: flex;
    gap: 5px;
    font-family: "Noto Sans JP", sans-serif;
  }
  .lesson04 .sec-box.sec02 .white-wrap .img-box .left .notes li .icon {
    min-width: 30px;
    flex-shrink: 0;
  }
  .lesson04 .sec-box.sec02 .white-wrap .img-box .left .notes.notes01 li .icon {
    min-width: 10px;
  }
  .lesson04 .sec-box.sec02 .white-wrap .img-box .img {
    width: 50.3%;
    padding-right: 8px;
  }
}
@media (max-width: 599px) {
  .lesson04 .sec-box.sec02 .ttl-box {
    margin-bottom: 24px;
  }
  .lesson04 .sec-box.sec02 .c-heading02 {
    margin-bottom: 11px;
    font-size: min(6.133vw, 23px);
    line-height: 1.4;
  }
  .lesson04 .sec-box.sec02 .white-wrap {
    margin-bottom: 11px;
    padding: 15px 18px 35px;
  }
  .lesson04 .sec-box.sec02 .img-box .left {
    margin-bottom: 18px;
  }
  .lesson04 .sec-box.sec02 .img-box .left .photo {
    margin-bottom: 19px;
  }
  .lesson04 .sec-box.sec02 .img-box .left .photo img {
    width: 100%;
  }
  .lesson04 .sec-box.sec02 .img-box .left p {
    margin-bottom: 8px;
    letter-spacing: 0.025em;
  }
  .lesson04 .sec-box.sec02 .img-box .left .notes {
    font-size: 9px;
    line-height: 1.6;
  }
  .lesson04 .sec-box.sec02 .img-box .left .notes li {
    padding-left: 1.8em;
    text-indent: -1.8em;
    font-family: "Noto Sans JP", sans-serif;
  }
  .lesson04 .sec-box.sec02 .img-box .left .notes.notes01 li {
    padding-left: 1.3em;
    text-indent: -1.3em;
  }
  .lesson04 .sec-box.sec02 .img-box .img {
    text-align: center;
    margin-right: 4px;
  }
}
.lesson04 .sec-box.sec03 .content::before {
  display: none;
}
@media (min-width: 600px) {
  .lesson04 .sec-box.sec03 {
    padding: min(11.328vw, 145px) 0 min(16.406vw, 210px);
  }
  .lesson04 .sec-box.sec03 .ttl-box {
    margin-bottom: min(4.453vw, 57px);
  }
  .lesson04 .sec-box.sec03 .ttl-box p {
    margin-bottom: min(3.281vw, 42px);
    letter-spacing: 0.04em;
    line-height: 1.75;
  }
  .lesson04 .sec-box.sec03 .white-wrap {
    margin-bottom: 15px;
    padding: min(4.297vw, 55px) min(3.516vw, 45px) min(4.453vw, 57px);
  }
  .lesson04 .sec-box.sec03 .white-wrap .c-heading02 {
    margin-bottom: min(3.906vw, 50px);
    font-size: min(2.33vw, 29.85px);
  }
  .lesson04 .sec-box.sec03 .white-wrap .image {
    margin: max(-6.641vw, -85px) min(2.031vw, 26px) 0 min(0.781vw, 10px);
  }
}
.lesson04 .sec-box.sec03 .txt-list {
  margin: min(5.078vw, 65px) min(0.313vw, 4px) min(0.781vw, 10px);
}
.lesson04 .sec-box.sec03 .txt-list li {
  padding: min(1.406vw, 18px) min(1.797vw, 23px) min(2.109vw, 27px);
  border: 1px solid #0093c7;
}
.lesson04 .sec-box.sec03 .txt-list li + li {
  margin-top: min(1.797vw, 23px);
}
.lesson04 .sec-box.sec03 .txt-list li .title {
  margin-bottom: 5px;
  min-height: min(5.156vw, 66px);
  display: flex;
  color: #0097dd;
  font-size: min(2.5vw, 32px);
  gap: min(3.125vw, 40px);
  font-weight: 500;
  font-family: "Noto Sans JP", sans-serif;
}
.lesson04 .sec-box.sec03 .txt-list li .title .img {
  width: min(6.406vw, 82px);
  flex-shrink: 0;
}
@media (max-width: 599px) {
  .lesson04 .sec-box.sec03 .ttl-box {
    margin-bottom: 26px;
  }
  .lesson04 .sec-box.sec03 .ttl-box p {
    margin-bottom: 24px;
  }
  .lesson04 .sec-box.sec03 .white-wrap {
    margin-bottom: 11px;
    padding: 22px 14px 11px;
  }
  .lesson04 .sec-box.sec03 .white-wrap .c-heading02 {
    margin-bottom: 13px;
    font-size: min(4vw, 15px);
    letter-spacing: 0.03em;
  }
  .lesson04 .sec-box.sec03 .white-wrap .image {
    margin: 0 2px;
  }
  .lesson04 .sec-box.sec03 .white-wrap .image .enlarge {
    margin: 18px -3px 0;
  }
  .lesson04 .sec-box.sec03 .txt-list {
    margin: 23px 0 25px;
  }
  .lesson04 .sec-box.sec03 .txt-list li {
    padding: 13px 13px 16px;
  }
  .lesson04 .sec-box.sec03 .txt-list li + li {
    margin-top: 10px;
  }
  .lesson04 .sec-box.sec03 .txt-list li .title {
    margin-bottom: 14px;
    min-height: min(8.8vw, 33px);
    font-size: min(4.267vw, 16px);
    line-height: 1.4;
    gap: min(4.267vw, 16px);
    align-items: center;
  }
  .lesson04 .sec-box.sec03 .txt-list li .title .img {
    width: 41px;
    margin: 0 0 2px 1px;
  }
}
.lesson04 .conclusion {
  color: #8069c9;
}
@media (min-width: 600px) {
  .lesson04 .conclusion__ttl {
    margin-left: -20px;
    letter-spacing: -2px;
  }
}/*# sourceMappingURL=style.css.map */