@charset "utf-8";

/* post001 */
/*--------------------------------------------------*/
.post001-inner {
  position: relative;
}
/* more */
.post001-more {
  position: absolute;
  top: 15px;
  right: 0;
  -webkit-transition: opacity 100ms;
          transition: opacity 100ms;
}
.post001-more:hover {
  opacity: .75;
}
.post001-more a {
  font-size: 14px;
  line-height: 1;
}
.post001-more a::before {
  font-family: 'fontello';
  font-size: 18px;
  display: inline-block;
  margin-right: 5px;
  content: '\e832';
  -webkit-transform: translateY(-2px);
      -ms-transform: translateY(-2px);
          transform: translateY(-2px);
  vertical-align: middle;
  color: #127bc8;
}
/* title */
.post001-heading {
  font-size: 24px;
  font-weight: bold;
  line-height: 1;
  padding: 0 0 0 25px;
}
.post001-heading i {
  font-size: 36px;
  vertical-align: middle;
  color: #1d7dc5;
}
.post001-heading i::before {
  margin: 0;
}
/* list */
.post001-list {
  margin-top: 25px;
  border-bottom: solid 1px #d1d1d1;
}
.post001-list a {
  position: relative;
  display: table;
  width: 100%;
  padding: 20px;
  -webkit-transition: background-color 100ms;
          transition: background-color 100ms;
  border-top: solid 1px #d1d1d1;
}
.post001-list a:hover {
  background-color: #fafafa;
}
.post001-list p {
  font-size: 14px;
  line-height: 1.3;
  display: table-cell;
  vertical-align: middle;
}
/* date */
.post001-date {
  font-size: 14px;
  width: 7.5em;
}
/* category */
.post001-category {
  width: 11em;
}
.post001-category > span {
  font-size: 12px;
  display: block;
  padding: 5px 0;
  text-align: center;
  color: white;
  border-radius: 4px;
}
.post001-category-01 {
  background: #f9a402;
}
.post001-category-01:not(:first-child) {
  margin-top: 2px;
}
.post001-category-02 {
  background: #ff4b47;
}
.post001-category-03 {
  background: #1d7dc5;
}
.post001-category-04 {
  background: #379d2a;
}
/* title */
.post001-title {
  padding: 0 0 0 20px;
}
/* media query */
@media (max-width: 767px) {
  .post001-list {
    margin-top: 15px;
  }
  .post001-list a {
    padding: 15px;
  }
}
@media (max-width: 575px) {
  .post001-heading {
    padding: 0;
  }
  .post001-list a {
    display: block;
    padding: 15px 0;
  }
  .post001-list p {
    display: block;
  }
  .post001-category {
    position: absolute;
    top: 12px;
    right: 0;
    width: 9em;
  }
  .post001-title {
    position: relative;
    display: block;
    overflow: hidden;
    width: 100%;
    margin-top: 15px;
    padding: 0;
  }
}