.titleArea {
  background-image: url(../images/mainimg.jpg);
}

#contents {
  margin: 0 5vw;
}

.mainArea {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-top: 150px;
}
@media screen and (max-width: 960px) {
  .mainArea {
    margin-top: 70px;
  }
}
@media screen and (max-width: 668px) {
  .mainArea {
    margin-top: 30px;
  }
}
@media screen and (max-width: 668px) and (orientation: portrait) {
  .mainArea > div {
    margin-bottom: 30px;
  }
}
.mainArea > div .text {
  margin-left: 3vw;
}
@media screen and (max-width: 668px) and (orientation: portrait) {
  .mainArea > div .text {
    margin-left: 0;
  }
}
.mainArea > div .text p {
  line-height: 200%;
}
.mainArea > div .text p:not(:last-child) {
  margin-bottom: 40px;
}
@media screen and (max-width: 668px) and (orientation: portrait) {
  .mainArea > div .text p:not(:last-child) {
    margin-bottom: 30px;
  }
}
.mainArea > div .text p a {
  text-decoration: underline;
}

.c1 > div {
  width: 37%;
}
@media screen and (max-width: 960px) {
  .c1 > div {
    width: 46%;
  }
}
@media screen and (max-width: 668px) and (orientation: portrait) {
  .c1 > div {
    width: 100%;
  }
}
.c1 > ul {
  width: 58%;
  display: flex;
  justify-content: space-between;
}
@media screen and (max-width: 960px) {
  .c1 > ul {
    width: 48%;
  }
}
@media screen and (max-width: 668px) and (orientation: portrait) {
  .c1 > ul {
    width: 100%;
  }
}
.c1 > ul li:nth-child(1) {
  width: 41%;
  margin-top: 190px;
}
@media screen and (max-width: 1200px) {
  .c1 > ul li:nth-child(1) {
    margin-top: 100px;
  }
}
.c1 > ul li:nth-child(2) {
  width: 52%;
}

.c2 {
  flex-direction: row-reverse;
}
.c2 > div {
  width: 50%;
  padding-left: 5vw;
}
@media screen and (max-width: 1367px) {
  .c2 > div {
    padding-left: 2vw;
  }
}
@media screen and (max-width: 668px) and (orientation: portrait) {
  .c2 > div {
    width: 100%;
  }
}
.c2 > ul {
  width: 50%;
}
@media screen and (max-width: 668px) and (orientation: portrait) {
  .c2 > ul {
    width: 100%;
  }
}
.c2 > ul li:nth-child(1) {
  width: 64%;
  margin-bottom: 80px;
}
@media screen and (max-width: 1200px) {
  .c2 > ul li:nth-child(1) {
    margin-bottom: 40px;
  }
}
.c2 > ul li:nth-child(2) {
  width: 44%;
  margin-left: auto;
}/*# sourceMappingURL=index.css.map */