@charset "utf-8";

@media screen and (max-width: 768px) {
/* -------------------------------------------------------------------
#COMPARISON
------------------------------------------------------------------- */
#COMPARISON {
  max-width: none;
  padding-right: 10px;
  padding-left: 10px;
  margin: 0;
  font-size: 1.5rem;
  line-height: 1.3;
}
#COMPARISON .inner {
  margin-left: 35px;
}





/* mv */
.mv {
  padding-top: 20px;
  padding-bottom: 20px;
  margin-bottom: 0;
}
#COMPARISON .mv .inner {
  margin-right: 10px;
  margin-left: 10px;
}

.mv p{
  font-size: 13px;
}
.mv .inner {
  position: static;
}
.mv .syuusei,
.mv .college {
  width: 42.5px;
}
.mv__content {
  margin-top: 20px;
}
.mv__content h1 {
  width: 100%;
  max-width: 233.5px;
}
.mv__bottom {
  position: static;
  margin-top: -5px;
  margin-right: 10px;
  margin-left: 10px;
}
.mv__bottom img {
  width: 40%;
  margin-top: 5%;
}



/* content */
.content {
  position: static;
  margin: 2% 0% 10%;
}
.content::before {
  content: none;
}
.content h2 {
  background-image: url(../../img/comparison/bg-subtitle-sp.png);
  height: calc((100vw - 30px) / 748 * 76);
}
.content .syuusei,
.content .college {
  position: relative;
  margin-top: 20px;
  margin-bottom: 20px;
}
.content .syuusei + .college {
  margin-top: 60px;
}
.content .syuusei + .college::after {
  content: "";
  position: absolute;
  top: -21.5px;
  left: 0;
  width: 100%;
  height: 3px;
  background-color: #231815;
}
.content .syuusei::before,
.content .college::before {
  writing-mode: vertical-rl;
  position: absolute;
  top: 0;
  width: 20px;
  height: 100%;
  padding-top: 1em;
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 20px;
  color: #fff;
}
.content .syuusei::before {
  content: "修成の学びの目的";
  left: 0;
  background-color: #094;
}
.content .college::before {
  content: "大学の学びの目的";
  right: 0;
  background-color: #7e7c7e;
}
.content .syuusei .flex,
.content .college .flex {
  margin-top: 0;
  margin-bottom: 0;
}
.content .syuusei .flex .left img {
}
.content .syuusei .flex .right {
  flex: 1;
  margin-left: 1em;
  margin-top: 2%;
}
.content .college .flex .left {
  flex: 1;
  margin-right: 1em;
  margin-top: 2%;
}
.content .college .flex .right img {
  /* height: 109px; */
}
.content .syuusei .right p,
.content .college .left p,
.content .syuusei .right img,
.content .college .left img {
  margin-top: 20px;
  margin-bottom: 20px;
}
.content .syuusei .right :first-child,
.content .college .left :first-child {
  margin-top: 0;
}
.content .syuusei .right :last-child,
.content .college .left :last-child {
  margin-bottom: 0;
}





/* porpose */
.porpose {}
.porpose .syuusei::before {
  content: "修成の学びの目的";
}
.porpose .college::before {
  content: "大学の学びの目的";
}
.porpose .syuusei .right p,
.porpose .college .left p {
  margin-bottom: 0;
}





/* feature */
.feature {}
.feature .syuusei::before {
  content: "修成の学びの特徴";
}
.feature .college::before {
  content: "大学の学びの特徴";
}
.feature .syuusei .right img {
  margin-left: -1em;
}
.feature .college .left img {
  margin-right: -1em;
  margin-left: auto;
}
.feature .syuusei .right img:first-of-type {
  max-width: 90%;
}
.feature .syuusei .right img:nth-of-type(2) {
  max-width: 70%;
}
.feature .syuusei .right img:last-of-type {
  max-width: 290%;
}
.feature .college .left img:first-of-type {
  max-width: 100%;
}
.feature .college .left img:nth-of-type(2) {
  max-width: 100%;
}
.feature .college .left img:last-of-type {
  max-width: 90%;
}
.feature .syuusei .right img + p,
.feature .college .left img + p {
  padding-top: 20px;
  border-top: 1px dotted rgba(0, 0, 0, .6);
}





/* second */
.second {}
.second .syuusei::before {
  content: "修成の学びの特徴";
}
.second .college::before {
  content: "大学の学びの特徴";
}
.second .syuusei .right img:first-of-type {
  max-width: 253.5px;
  margin-left: -1em;
}
.second .college .left img:first-of-type {
  max-width: 225px;
  margin-right: -1em;
  margin-left: auto;
}
.second .syuusei .right img:nth-of-type(2),
.second .syuusei .right img:last-of-type {
  max-width: 285px;
  margin-left: -10px;
}
.second .college .left img:last-of-type {
  max-width: 285px;
  margin-right: -30px;
  margin-left: auto;
}
.second .sp > img {
  max-width: 95%;
  margin: 0 auto;
}
.second .sp > img + img {
  margin-top: 20px;
}





/* first */
.first {}
.first .syuusei::before {
  content: "修成の学びの特徴";
}
.first .college::before {
  content: "大学の学びの特徴";
}
.first a {
  width: 189px;
  margin-top: 20px;
}
.first .syuusei .right img:first-of-type {
  max-width: 239px;
  margin-left: -1em;
}
.first .college .left img:first-of-type {
  max-width: 259.5px;
  margin-right: -1em;
  margin-left: auto;
}
.first .syuusei .right img:nth-of-type(2),
.first .syuusei .right img:last-of-type {
  max-width: 285px;
  margin-left: -30px;
}
.first .college .left img:last-of-type {
  max-width: 285px;
  margin-right: -30px;
  margin-left: auto;
}
.first .sp > img {
  max-width: 374px;
  margin: 0 auto;
}
.first .sp > img + img {
  margin-top: 20px;
}





/* recruit */
.recruit {}
.recruit .syuusei::before {
  content: "修成の求人状況";
}
.recruit .college::before {
  content: "大学の求人状況";
}
.recruit .syuusei .right img {
  max-width: 259.5px;
  margin-left: -1em;
}
.recruit .college .left img {
  max-width: 100%;
  margin-right: 0em;
  margin-left: auto;
}





/* support */
.support {}
.support .syuusei::before {
  content: "修成の就職サポート";
}
.support .college::before {
  content: "大学の就職サポート";
}
.support .syuusei .right img {
  max-width: 202.5px;
  margin-left: -1em;
}
.support .college .left img {
  max-width: 199.5px;
  margin-right: -1em;
  margin-left: auto;
}





/* price */
.price {}
.price .syuusei::before {
  content: "修成の学費";
}
.price .college::before {
  content: "大学の学費";
}
.price .syuusei {
  padding-bottom: 0px;
}
.price .syuusei .right img {
  max-width: 100%;
  margin-left: 1rem;
}
.price .college .left img {
  max-width: 100%;
  margin-right: 0em;
  margin-left: auto;
}
.price .sp > img {
  max-width: 100%;
  margin: 0 auto;
}
.bottom-1 p {
  font-size: 14px;
}
.bottom-2 p {
  font-size: 14px;
}
#modal {
  margin-bottom: 10%;
}
#modal p {
  font-size: 16px;
  line-height: 1.5;
}

/* bottom-1 */
.bottom-1 {
  padding-bottom: 40px;
}
.bottom-1 > img {
  width: 95%;
}
.bottom-1 a {
  width: 100%;
  max-width: 354.5px;
}
.bottom-1 a + a {
  margin-top: 20px;
}





/* bottom-2 */
.bottom-2 {
  padding-top: 20px;
  padding-bottom: 100px;
}
.bottom-2 .flex {
  display: block;
}
.bottom-2 .flex a {
  width: 95%;
  margin: 0 auto;
}
.bottom-2 .flex a + a {
  width: 95%;
  margin: 4% auto 0;
}


.over-line{
  border-top: 2px solid #000;
}

.first .inner > img:first-of-type {
  width: 100%;
  margin-top: 0px;
}
.first .inner > img:nth-of-type(2) {
  width: 100%;
  margin-top: 5%;
  margin-left: 0%;
}
.first .inner > img:last-of-type {
  width: 100%;
  margin-left: 0%;
  margin-top: 10%;
}

.second-txt{
  font-size: 15px;
  line-height: 2;
  text-align: left !important;
  margin-bottom:10%;
}

.second .sp .top .inner img:nth-child(2){
  width: 100%;
  margin-top: 0;
} 
.second .sp .top .inner img:nth-child(3){
  width: 100%;
} 
.second .sp .top .inner img:nth-child(4){
  width: 100%;
} 
.second .sp .bottom .inner img:nth-child(2){
  width: 100%;
  margin-top: 0;
} 
.second .sp .bottom .inner img:nth-child(3){
  width: 100%;
} 
.second .sp .bottom .inner img:nth-child(4){
  width: 100%;
} 

.content .sp .college .oppose{
  margin-right: 35px !important;
  margin-left: 22.5px !important;
}

.w-100{
  width: 100%;
}

.wht-txt{
  font-size: 17px;
  background-color: #fff;
  line-height: 1.5;
  width: 75%;
  margin: 10% auto;
  padding: 0;
}
.under-line{
  position: relative;
}
.under-line::after{
  content: "";
  position: absolute;
  top: -47%;
  left: 0;
  width: 100%;
  height: 3px;
  background-color: #231815;
  z-index: -999;
}
.about h2 img{
  width: auto;
  height: 19.5px;
}

.about{
}

.about .sp .inner {
  margin-bottom: 15%;
}

.about .sp .inner img{
  width: 50%;
  margin: 0 auto;
}

.about .sp .inner p{
  text-align: center;
  font-size: 16px;
  line-height: 1.5;
  margin-top: 5%;
  margin-bottom: -5%;
}

.lines{
  position: relative;
}

.lines::after{
  content: "";
  position: absolute;
  bottom: -95%;
  left: 0;
  width: 100%;
  height: 4px;
  background-color: #231815;
  z-index: -999;
}

.image-horizontal-scroll{
  height: auto;
  width: 90%;
  margin: 0 auto;
  overflow-x: scroll;
	white-space: nowrap;
}

.image-horizontal-scroll > img{
  width: 150%;
  font-size: 16px;
  margin: 5% auto 4%;
}

@media screen and (max-width: 374px) {
  /* mv */
  .mv__bottom {
    margin-right: 0;
    margin-left: 0;
  }
}





}