@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@700&display=swap");
@font-face {
  font-family: "Yu Gothic";
  src: local("Yu Gothic Medium");
  font-weight: 400;
}
/* 看護学部 */
/* 法学部 */
/* 経済学部 */
/* 経営学部 */
/* 理工学部 */
/* 建築学部 */
/* 薬学部 */
/* 文芸学部 */
/* 総合社会学部 */
/* 国際学部 */
/* 情報学部 */
/* 農学部 */
/* 医学部 */
/* 生物理工学部 */
/* 工学部 */
/* 産業理工学部 */
/* 短期大学部 */
/* 通信教育部 */
/* 留学生 */
.mvArea {
  text-align: center;
  padding-top: 14.9333333333vw;
  margin-bottom: -25.0666666667vw;
}
@media screen and (min-width: 751px), print {
  .mvArea {
    padding-top: 1.875vw;
    margin-bottom: -4.375vw;
  }
}
.mvArea img {
  position: relative;
  left: 4.2666666667vw;
  width: 86.6666666667vw;
}
@media screen and (min-width: 751px), print {
  .mvArea img {
    left: 1.5625vw;
    width: 43.59375vw;
  }
}

.breadcrumbArea {
  position: absolute;
  z-index: 5;
  top: 17.3333333333vw;
  left: 2.5333333333vw;
}
@media screen and (min-width: 751px), print {
  .breadcrumbArea {
    left: auto;
    top: 14.0625vw;
    right: 2.578125vw;
  }
}
.breadcrumbArea ul {
  display: flex;
  flex-wrap: wrap;
}
.breadcrumbArea ul li {
  line-height: 1.2;
  font-size: 2.6666666667vw;
  font-weight: 500;
  letter-spacing: 0.1em;
}
@media screen and (min-width: 751px), print {
  .breadcrumbArea ul li {
    font-size: 0.9375vw;
  }
}
.breadcrumbArea ul li + li::before {
  content: ">";
  margin: 0 3px 0 5px;
}
.breadcrumbArea ul li a {
  text-decoration: underline;
}
.breadcrumbArea ul li a:hover {
  text-decoration: none;
}

.listArea {
  border-bottom: 1px solid #000;
}
.listArea-wrap {
  padding-top: 28.6666666667vw;
  padding-bottom: 16vw;
  background-image: url(/assets/img/before-after/bg--sp.webp);
  background-size: 3.7333333333vw 3.7333333333vw;
  background-repeat: repeat;
  background-position: center top;
}
@media screen and (min-width: 751px), print {
  .listArea-wrap {
    padding-bottom: 0;
    padding-top: 5.703125vw;
    background-image: url(/assets/img/before-after/bg.webp);
    background-size: 2.1875vw 2.1875vw;
  }
}
.listArea-title {
  text-align: center;
  margin-bottom: 10.6666666667vw;
}
@media screen and (min-width: 751px), print {
  .listArea-title {
    margin-bottom: 3.125vw;
  }
}
.listArea-title p {
  font-size: 3.4666666667vw;
  line-height: 1.76;
  letter-spacing: 0.1rem;
  margin-bottom: 2vw;
}
@media screen and (min-width: 751px), print {
  .listArea-title p {
    font-size: 1.25vw;
    margin-bottom: 1.5625vw;
  }
}
.listArea-title img {
  width: 75.7333333333vw;
}
@media screen and (min-width: 751px), print {
  .listArea-title img {
    width: 30.390625vw;
  }
}
.listArea-list {
  margin: 0px;
}
@media screen and (min-width: 751px), print {
  .listArea-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 93.4375vw;
    margin-inline: auto;
    padding-bottom: 2.578125vw;
  }
}
@media screen and (max-width: 750px) {
  .listArea-list li {
    width: 89.3333333333vw;
    margin-inline: auto;
    margin-bottom: 4.8vw;
  }
}
@media screen and (min-width: 751px), print {
  .listArea-list li {
    width: 21.796875vw;
    margin-bottom: 3.671875vw;
  }
}
.listArea-item-bg01 .listArea-imgs-after, .listArea-item-bg06 .listArea-imgs-after, .listArea-item-bg30 .listArea-imgs-after {
  background-color: #f9be00;
}
.listArea-item-bg02 .listArea-imgs-after, .listArea-item-bg12 .listArea-imgs-after {
  background-color: #009aa5;
}
.listArea-item-bg03 .listArea-imgs-after, .listArea-item-bg34 .listArea-imgs-after {
  background-color: #C80260;
}
.listArea-item-bg04 .listArea-imgs-after, .listArea-item-bg07 .listArea-imgs-after, .listArea-item-bg14 .listArea-imgs-after {
  background-color: #f18c00;
}
.listArea-item-bg05 .listArea-imgs-after, .listArea-item-bg36 .listArea-imgs-after {
  background-color: #004da2;
}
.listArea-item-bg08 .listArea-imgs-after, .listArea-item-bg16 .listArea-imgs-after, .listArea-item-bg21 .listArea-imgs-after {
  background-color: #e6242e;
}
.listArea-item-bg09 .listArea-imgs-after, .listArea-item-bg18 .listArea-imgs-after, .listArea-item-bg38 .listArea-imgs-after {
  background-color: #009243;
}
.listArea-item-bg10 .listArea-imgs-after, .listArea-item-bg20 .listArea-imgs-after, .listArea-item-bg35 .listArea-imgs-after {
  background-color: #d7007f;
}
.listArea-item-bg11 .listArea-imgs-after {
  background-color: #000000;
}
.listArea-item-bg13 .listArea-imgs-after, .listArea-item-bg23 .listArea-imgs-after, .listArea-item-bg32 .listArea-imgs-after {
  background-color: #0070bc;
}
.listArea-item-bg15 .listArea-imgs-after {
  background-color: #009aa5;
}
.listArea-item-bg17 .listArea-imgs-after, .listArea-item-bg31 .listArea-imgs-after {
  background-color: #93d1ca;
}
.listArea-item-bg19 .listArea-imgs-after, .listArea-item-bg26 .listArea-imgs-after {
  background-color: #01a7ea;
}
.listArea-item-bg22 .listArea-imgs-after, .listArea-item-bg27 .listArea-imgs-after, .listArea-item-bg37 .listArea-imgs-after {
  background-color: #65117e;
}
.listArea-item-bg24 .listArea-imgs-after, .listArea-item-bg25 .listArea-imgs-after, .listArea-item-bg29 .listArea-imgs-after {
  background-color: #1d2089;
}
.listArea-item-bg28 .listArea-imgs-after {
  background-color: #fff100;
}
.listArea-item-bg28 .listArea-imgs-after p {
  color: #000000;
}
.listArea-item-bg33 .listArea-imgs-after, .listArea-item-bg39 .listArea-imgs-after {
  background-color: #8fc320;
}
.listArea-item-bg40 .listArea-imgs-after {
  background-color: #72283f;
}
@media screen and (min-width: 751px), print {
  .listArea-item-bg05 .listArea-txtArea .info, .listArea-item-bg09 .listArea-txtArea .info, .listArea-item-bg18 .listArea-txtArea .info {
    letter-spacing: -0.05rem;
  }
}
@media screen and (min-width: 751px), print {
  .listArea-item-bg18 .listArea-txtArea .name {
    letter-spacing: -0.05rem;
  }
}
.listArea-num {
  font-family: "Poppins", sans-serif;
  color: #FFFFFF;
  letter-spacing: 0.2rem;
  font-size: 7.2vw;
  line-height: 1.1;
  -webkit-text-stroke: 2px black;
  text-stroke: 2px black;
  paint-order: stroke;
  margin-bottom: 1.4666666667vw;
}
@media screen and (min-width: 751px), print {
  .listArea-num {
    font-size: 2.1875vw;
    margin-bottom: 0.390625vw;
  }
}
.listArea-box {
  position: relative;
}
@media screen and (max-width: 750px) {
  .listArea-box {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
}
.listArea-imgs {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
@media screen and (max-width: 750px) {
  .listArea-imgs {
    width: 69.4666666667vw;
  }
}
.listArea-imgs-before, .listArea-imgs-after {
  position: relative;
  width: 33.7333333333vw;
  border: 1px solid #000000;
  padding: 2.6666666667vw 2.2666666667vw 1.8666666667vw;
  border-radius: 4px;
}
@media screen and (min-width: 751px), print {
  .listArea-imgs-before, .listArea-imgs-after {
    width: 10.625vw;
    padding: 0.859375vw 0.703125vw 0.703125vw;
    border-radius: 0.3125vw;
  }
}
.listArea-imgs-before p, .listArea-imgs-after p {
  height: 10vw;
  font-size: 3.2vw;
  font-weight: 600;
  line-height: 1.25;
  padding-top: 1.8666666667vw;
}
@media screen and (min-width: 751px), print {
  .listArea-imgs-before p, .listArea-imgs-after p {
    height: 2.96875vw;
    font-size: 1.015625vw;
    padding-top: 0.46875vw;
  }
}
.listArea-imgs-before {
  background-color: #ffffff;
}
.listArea-imgs-before::after {
  content: "";
  position: absolute;
  z-index: 5;
  top: 26.8vw;
  left: 30.6666666667vw;
  width: 9.4666666667vw;
  height: 2.5333333333vw;
  background-image: url(/assets/img/before-after/pct-arrow.webp);
  background-size: 100% 100%;
}
@media screen and (min-width: 751px), print {
  .listArea-imgs-before::after {
    top: 8.203125vw;
    left: 9.53125vw;
    width: 2.96875vw;
    height: 0.859375vw;
  }
}
.listArea-imgs-after p {
  color: #ffffff;
}
@media screen and (max-width: 750px) {
  .listArea-txtArea {
    display: flex;
    justify-content: flex-start;
    flex-flow: row-reverse;
    padding-top: 3.3333333333vw;
    border-top: 3px solid #000000;
    width: 15.6vw;
  }
}
@media screen and (min-width: 751px), print {
  .listArea-txtArea {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    border-left: 3px solid #000000;
    margin-top: 0.78125vw;
  }
}
.listArea-txtArea .name {
  font-size: 3.6vw;
  font-weight: 600;
}
@media screen and (max-width: 750px) {
  .listArea-txtArea .name {
    line-height: 0.8;
    writing-mode: vertical-rl;
    width: 1.9rem;
  }
}
@media screen and (max-width: 400px) {
  .listArea-txtArea .name {
    line-height: 1.1;
    margin-left: 1.0666666667vw;
    width: auto;
  }
}
@media screen and (min-width: 751px), print {
  .listArea-txtArea .name {
    font-size: 0.9375vw;
    line-height: 1.3;
    padding-left: 0.78125vw;
  }
}
.listArea-txtArea .info {
  font-size: 2.9333333333vw;
  line-height: 1.35;
}
@media screen and (max-width: 750px) {
  .listArea-txtArea .info {
    writing-mode: vertical-rl;
    text-orientation: upright;
  }
  .listArea-txtArea .info .half-space {
    font-size: 0.4em;
  }
  .listArea-txtArea .info sup {
    position: relative;
    top: 0;
    right: -0.02rem;
    margin-bottom: -0.1rem;
  }
}
@media screen and (min-width: 751px), print {
  .listArea-txtArea .info {
    text-align: right;
    font-size: 0.78125vw;
    line-height: 1.5;
  }
}

.btnArea {
  border-top: solid 1px #000;
  padding-top: 2.6666666667vw;
  padding-bottom: 2.6666666667vw;
  margin-top: 0.5333333333vw;
}
@media screen and (min-width: 751px), print {
  .btnArea {
    margin-top: 0.3125vw;
    padding-top: 2.34375vw;
    padding-bottom: 2.34375vw;
  }
}/*# sourceMappingURL=before-after.css.map */