@charset "UTF-8";
.main {
  max-width: 1200px;
  margin: auto;
}

@media screen and (max-width: 1200px) {
  .main {
    padding-left: 30px;
    padding-right: 30px;
  }
}

@media screen and (max-width: 668px) and (orientation: portrait) {
  .main {
    padding-left: 20px;
    padding-right: 20px;
  }
}

.main .listArea > ul {
  max-width: 1200px;
  margin: 0 auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-flow: wrap;
      flex-flow: wrap;
}

@media screen and (max-width: 1500px) {
  .main .listArea > ul {
    max-width: 900px;
  }
}

@media screen and (max-width: 960px) {
  .main .listArea > ul {
    margin: 0 40px;
  }
}

@media screen and (max-width: 668px) and (orientation: portrait) {
  .main .listArea > ul {
    display: block;
    width: calc(100% - 50px);
    margin: 0 25px;
  }
}

.main .listArea > ul li {
  width: calc(33.33% - 60px);
  margin: 0 30px 50px;
}

@media screen and (max-width: 1500px) {
  .main .listArea > ul li {
    width: calc(50% - 80px);
    margin: 0 40px 50px;
  }
}

@media screen and (max-width: 668px) and (orientation: portrait) {
  .main .listArea > ul li {
    width: 100%;
    margin: 0;
  }
  .main .listArea > ul li:not(:last-child) {
    margin-bottom: 40px;
  }
}

.main .listArea > ul li a span {
  display: block;
}

.main .listArea > ul li a span.photo {
  overflow: hidden;
}

.main .listArea > ul li a span.photo span {
  height: 0;
  padding-top: 100%;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  -webkit-transition: 0.5s;
  transition: 0.5s;
}

@media screen and (max-width: 668px) and (orientation: portrait) {
  .main .listArea > ul li a span.photo span {
    padding-top: 80%;
  }
}

.main .listArea > ul li a span.text {
  text-align: center;
  letter-spacing: 2px;
  font-size: 1.2em;
  margin-top: 10px;
}

.main .listArea > ul li a:hover span.photo span {
  -webkit-transform: scale(1.05);
          transform: scale(1.05);
}

.main .pagenation > div {
  padding-top: 30px;
}

.main .pagenation > div > ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.main .pagenation > div > ul > li {
  margin: 0 5px 10px;
}

.main .pagenation > div > ul > li a,
.main .pagenation > div > ul > li span {
  background-color: #eee;
  display: block;
  width: 30px;
  line-height: 30px;
  text-align: center;
}

.main .pagenation > div > ul > li span {
  font-size: 0.9em;
  background-color: #eee;
}

.main .pagenation > div > ul > li a {
  background-color: #231815;
  color: #fff;
}

.main .pagenation > div > ul > li a.prev {
  background-color: #eee;
}

.main .pagenation > div > ul > li a.prev img {
  display: none !important;
}

.main .pagenation > div > ul > li a.prev::before {
  content: "◀";
  display: block;
  font-size: 0.8em;
  color: #444;
}

.main .pagenation > div > ul > li a.next {
  background-color: #eee;
}

.main .pagenation > div > ul > li a.next img {
  display: none !important;
}

.main .pagenation > div > ul > li a.next::before {
  content: "▶";
  display: block;
  font-size: 0.8em;
  color: #444;
}
/*# sourceMappingURL=index.css.map */