@charset "UTF-8";

.narrow_width {
  width: 50%!important;
}

/* post lists */
.list_posts_top li {
  position: relative;
  overflow: hidden;
  padding-bottom: 16px;
}

.list_posts_top ol li:before {
  position: absolute;
  content: counter(rank);
}

.list_posts_top .item_post a {
  display: flex;
  flex-direction: row;
  text-decoration: none;
  color: inherit;
}

.list_posts_top .item_post img {
  width: 40%;
  height: auto;
}

.list_posts_top .item_post .thumnail_app {
  position: absolute;
  font-size: 8px;
  /* top: 16px; */
  background-color: #07142E;
  color: #fff;
  padding: 0.5em 2em;
  border-radius: 0 0 0.5em 0;
}

.list_posts_top .post_title {
  font-size: 16px;
  margin: 0 5%;

  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.list_posts_top .post_date {
  text-align: right;
  font-size: 8px;
  color: #696969;
}


/* osusume post lists */
.make_1st_bigger {
  display: flex;
  flex-wrap: wrap;
  gap: 5%;
}

.make_1st_bigger .item_post {
  width:  45%;
}

.make_1st_bigger .item_post:first-child {
  width: 100%;
  margin-bottom: 50px;
}

.make_1st_bigger .item_post .thumnail_app {
  /* bring this element top after clip-path processed */
  z-index: 10;
}

.make_1st_bigger .item_post img {
  width: 100%;
  height: 100%;
  clip-path: polygon(0 8%, 100% 8%, 100% 82%, 0% 82%);
  margin-top: -6%;
}

.make_1st_bigger .item_post .post_info {
  margin-top: -12%;
}

.make_1st_bigger .item_post a {
  display: block!important;
}


.pagenation {
  text-align: center;
}

.pagenation li {
  display: inline-block;
}


@media screen and (max-width: 600px) {

  .narrow_width {
    width: 80%!important;
  }

  /* Osusume list*/
  .list_osusume_posts_top {
      display: block;
  } 
  
  .list_osusume_posts_top .item_post .thumnail_tilte {
      display: flex;
  }

  .list_osusume_posts_top .item_post {
      width: 100%;
  }

  .list_osusume_posts_top .item_post img {
      max-width: 126px;
      width: 126px;
      height: auto;
  }

  .make_1st_bigger .item_post:first-child {
    margin-bottom: 25px;
  }

  .list_posts_top .post_title {
    -webkit-line-clamp: 4;
  }
}