/* stylelint-disable */
/* stylelint-enable */
.gap img {
  width: 100%;
  height: auto;
}

.mainVisual {
  background: #fcf1f1;
}
.mainVisual__contents {
  position: relative;
  padding: 90px 25px 30px;
  overflow: hidden;
}
.mainVisual__contents::before, .mainVisual__contents::after {
  position: absolute;
  content: "";
}
.mainVisual__contents::before {
  top: -50px;
  right: -55px;
  width: 136px;
  height: 175px;
  background: url("/assets/images/pages/learning_step/common/mv_deco1.svg") no-repeat center/cover;
}
.mainVisual__contents .hdg {
  display: flex;
  flex-direction: column;
  margin: 10px 0 0;
  font-family: "Zen Old Mincho", serif;
  font-weight: 400;
  color: var(--heavyColor);
}
.mainVisual__contents .hdg__sub {
  font-size: 20px;
  line-height: 1.4;
}
.mainVisual__contents .hdg__sub .small {
  font-size: 0.79em;
}
.mainVisual__contents .hdg__main {
  margin: 10px 0 0;
  font-size: 40px;
  line-height: 1.15;
}
.mainVisual__contents .hdg__main--shorten {
  letter-spacing: -0.15em;
}
.mainVisual__img img {
  width: 100%;
  height: auto;
}

.l-main {
  font-family: "Zen Old Mincho", serif;
}

.sec-about {
  padding: 50px 0 60px;
}
.sec-about .heading {
  margin-bottom: 23px;
  font-size: 26px;
  font-weight: 500;
  line-height: 1.6153846154;
  text-align: center;
}
.sec-about .text {
  font-size: 14px;
  line-height: 1.9;
}
.sec-about .anchor-list {
  display: flex;
  gap: 23px;
  justify-content: center;
  margin-top: 36px;
}
.sec-about .anchor-list__item {
  flex: 1 1 auto;
  width: 100%;
}
.sec-about .anchor {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 94px;
  padding-bottom: 10px;
  font-size: 15px;
  font-weight: 500;
  line-height: 1;
  color: #fff;
  letter-spacing: -0.05em;
  -o-border-image: url("/assets/images/pages/life/uniform/anchor_bg1.svg") 40 fill/40px;
     border-image: url("/assets/images/pages/life/uniform/anchor_bg1.svg") 40 fill/40px;
}
.sec-about .anchor::before {
  display: block;
  width: 81px;
  height: 10px;
  margin-bottom: 8px;
  content: "";
  background: url("/assets/images/pages/life/uniform/high-school_hdg.svg") no-repeat center/contain;
}
.sec-about .anchor::after {
  position: absolute;
  right: 0;
  bottom: 14px;
  left: 0;
  display: block;
  width: 14px;
  height: 9px;
  margin: 0 auto;
  content: "";
  background: url("/assets/images/pages/life/uniform/icon_arrow.svg") no-repeat center/contain;
}
.sec-about .anchor--junior {
  border-image-source: url("/assets/images/pages/life/uniform/anchor_bg2.svg");
}
.sec-about .anchor--junior::before {
  width: 124px;
  height: 13px;
  margin-bottom: 5px;
  background-image: url("/assets/images/pages/life/uniform/junior-high-school_hdg.svg");
}

.sec-uniform {
  padding-bottom: 78px;
}
.sec-uniform__head {
  position: relative;
  z-index: 0;
  padding: 80px 0 0;
  color: #fff;
}
.sec-uniform__head::before {
  position: absolute;
  top: 60px;
  left: 0;
  z-index: -1;
  display: block;
  width: 100%;
  height: 72px;
  content: "";
  background: url("/assets/images/pages/life/uniform/high-school_hdg.svg") no-repeat center/auto 100%;
  opacity: 0.2;
}
.sec-uniform__head .heading {
  margin-bottom: 34px;
  font-size: 36px;
  font-weight: 500;
  line-height: 1;
  text-align: center;
}
.sec-uniform__head .heading__small {
  font-size: 28px;
}
.sec-uniform__head .image img {
  width: 100%;
  height: auto;
}
.sec-uniform--high-school {
  background: #fcf7f9;
}
.sec-uniform--high-school .sec-uniform__head {
  background: #b72f8c;
}
.sec-uniform--junior-high-school {
  background: #fdf9ee;
}
.sec-uniform--junior-high-school .sec-uniform__head {
  background: #f18d02;
}
.sec-uniform--junior-high-school .sec-uniform__head::before {
  background-image: url("/assets/images/pages/life/uniform/junior-high-school_hdg.svg");
}

.section {
  padding: 57px 0 0;
}
.section + .section {
  margin-top: 23px;
}
.section .sec-heading {
  margin-bottom: 27px;
  line-height: 1;
  text-align: center;
}
.section .sec-heading__en {
  display: block;
  margin-bottom: 15px;
}
.section .sec-heading__en img {
  display: block;
  width: auto;
  height: 12px;
  margin: 0 auto;
}
.section .sec-heading__ja {
  font-size: 18px;
  font-weight: 500;
}
.section .swiper-container {
  padding: 0 25px;
}
.section .swiper-slide img {
  width: 100%;
  height: auto;
}
.section .main-item-list {
  display: grid;
  gap: 37px;
  margin-bottom: 57px;
}
.section .main-item-list .card__image {
  position: relative;
  margin-bottom: 13px;
}
.section .main-item-list .card__image img {
  width: 100%;
  height: auto;
}
.section .main-item-list .card__image .deco {
  position: absolute;
  right: 10px;
  bottom: -10px;
}
.section .main-item-list .card__image .deco img {
  width: 90px;
}
.section .main-item-list .card__text {
  line-height: 2.15;
  letter-spacing: 0;
}
.section .point-item + .point-item {
  margin-top: 60px;
}
.section .point-item__image {
  margin-bottom: 23px;
}
.section .point-item__image img {
  width: 100%;
  height: auto;
}
.section .point-item__content .title {
  margin-bottom: 10px;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.44;
  letter-spacing: 0;
}
.section .point-item__content .text {
  line-height: 2.15;
  letter-spacing: -0.04em;
}
.section .point-item__content .color-variation {
  position: relative;
  z-index: 0;
  padding: 1px 10px 24px;
  margin-top: 50px;
}
.section .point-item__content .color-variation::before {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  display: block;
  width: 100%;
  height: 100%;
  content: "";
  background: #fff;
  border-radius: 8px;
  -webkit-mask: url("/assets/images/pages/life/uniform/color_heading.svg") no-repeat right 5px top 7px/182px 43px, linear-gradient(#fff, #fff);
          mask: url("/assets/images/pages/life/uniform/color_heading.svg") no-repeat right 5px top 7px/182px 43px, linear-gradient(#fff, #fff);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
}
.section .point-item__content .color-variation__image {
  position: relative;
  margin: -36px 0 10px;
  text-align: center;
}
.section .point-item__content .color-variation__text {
  font-size: 16px;
  line-height: 1.75;
  text-align: center;
  letter-spacing: 0;
}
.section .item-variation {
  margin-top: 65px;
}
.section .item-variation__heading {
  margin-bottom: 40px;
}
.section .item-variation .item-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 36px 0;
}
.section .item-variation .item {
  text-align: center;
}
.section .item-variation .item__image {
  margin-bottom: 5px;
}
.section .item-variation .item__name {
  margin-bottom: 10px;
}
.section .item-variation .item__name img {
  display: block;
  margin: 0 auto;
}
.section .item-variation .item__text {
  line-height: 1.5;
  letter-spacing: 0;
}
@media (min-width: 768px) {
  .mainVisual {
    display: flex;
  }
  .mainVisual__contents {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 50%;
    padding: 130px 0 130px 5.5555555556vw;
  }
  .mainVisual__contents::before {
    top: -28px;
    right: 20px;
    width: 215px;
    height: 276px;
  }
  .mainVisual__contents::after {
    bottom: -25px;
    left: -58px;
    width: 314px;
    height: 284px;
    background: url("/assets/images/pages/learning_step/common/mv_deco2.svg") no-repeat center/cover;
  }
  .mainVisual__contents .hdg {
    margin: 25px 0 0;
  }
  .mainVisual__contents .hdg__sub {
    font-size: 28px;
  }
  .mainVisual__contents .hdg__main {
    font-size: 54px;
  }
  .mainVisual__img {
    width: 50%;
  }
  .mainVisual__img img {
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
  }
  .sec-about {
    padding: 87px 0 80px;
  }
  .sec-about .heading {
    margin-bottom: 20px;
    font-size: 26px;
  }
  .sec-about .text {
    text-align: center;
  }
  .sec-about .anchor-list {
    gap: 22px;
    margin-top: 55px;
  }
  .sec-about .anchor-list__item {
    flex: 0 0 auto;
    width: 292px;
  }
  .sec-about .anchor {
    height: 124px;
    font-size: 20px;
    letter-spacing: 0;
    transition: opacity 0.3s;
  }
  .sec-about .anchor:hover {
    opacity: 0.8;
  }
  .sec-about .anchor::before {
    width: 104px;
    height: 13px;
    margin-bottom: 12px;
  }
  .sec-about .anchor::after {
    bottom: 24px;
    width: 12px;
    height: 8px;
  }
  .sec-about .anchor--junior::before {
    width: 159px;
    height: 17px;
    margin-bottom: 8px;
  }
  .sec-uniform {
    padding-bottom: 113px;
  }
  .sec-uniform__head {
    padding: 150px 0 0;
  }
  .sec-uniform__head::before {
    top: 96px;
    height: 114px;
  }
  .sec-uniform__head .heading {
    margin-bottom: 68px;
    font-size: 42px;
  }
  .sec-uniform__head .heading__small {
    font-size: 36px;
  }
  .section {
    padding: 80px 0 0;
  }
  .section + .section {
    margin-top: 38px;
  }
  .section .l-container {
    width: 1200px;
  }
  .section .sec-heading {
    margin-bottom: 35px;
  }
  .section .sec-heading__en img {
    height: 15px;
  }
  .section .sec-heading__ja {
    font-size: 24px;
  }
  .section .swiper-container {
    padding: 0 calc((100% - 1200px) / 2);
  }
  .section .main-item-list {
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    margin-bottom: 62px;
  }
  .section .main-item-list .card__image {
    margin-bottom: 15px;
  }
  .section .main-item-list .card__image .deco {
    right: 12px;
  }
  .section .main-item-list .card__image .deco img {
    width: 110px;
  }
  .section .main-item-list .card__text {
    line-height: 1.75;
  }
  .section .point-item {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    align-items: center;
  }
  .section .point-item + .point-item {
    margin-top: 114px;
  }
  .section .point-item__image {
    margin: 0;
  }
  .section .point-item__content {
    padding-left: 40px;
  }
  .section .point-item__content .title {
    margin-bottom: 15px;
    font-size: 24px;
  }
  .section .point-item__content .text {
    line-height: 1.75;
  }
  .section .point-item__content .color-variation {
    display: flex;
    padding: 46px 32px 10px;
    margin-top: 55px;
  }
  .section .point-item__content .color-variation::before {
    -webkit-mask-position: right 15px top 16px;
            mask-position: right 15px top 16px;
  }
  .section .point-item__content .color-variation__image {
    margin: -80px 20px 0 0;
  }
  .section .point-item__content .color-variation__image img {
    width: auto;
    height: 171px;
  }
  .section .point-item__content .color-variation__text {
    text-align: left;
  }
  .section .item-variation {
    width: 1027px;
    margin: 120px auto 0;
  }
  .section .item-variation + .item-variation {
    margin-top: 75px;
  }
  .section .item-variation__heading {
    margin-bottom: -8px;
  }
  .section .item-variation .item-list {
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
  }
  .section .item-variation .item__image {
    margin-bottom: 10px;
  }
  .section .item-variation .item__image img {
    width: 215px;
    height: auto;
  }
  .section .item-variation .item__name img {
    width: auto;
    height: 12px;
  }
  .section .item-variation .item__text .small {
    font-size: 12px;
  }
}