@charset "UTF-8";

#blog {
  display: block;
  max-width: 100%;

  text-align: center;
  margin: 0 auto;
  padding: 120px 0;
  background-color: #FFFAE5;
  position: relative;
  background-image: url(/wp-content/themes/RANKUP/assets/images/common/top-rectangle.jpg);
  background-position: top;
  background-repeat: no-repeat;
  background-size: 100% 398px;
}

.blog-inner {
  max-width: 1000px;
  text-align: center;
  margin: 0 auto;
  background-color: #fff;
  border-radius: 20px;
  padding: 38px 0 78px 0;
}

.category-date {
  font-size: 12px;
  color: #646464;
}

.blog-contents {
  margin-top: 40px;
  display: flex;
}

.blog-boxes {
  width: 567px;
  margin-right: 24px;
  margin-left: 78px;
}

.blog-box01 {
  background-image: radial-gradient(circle, #048ce2 1px, transparent 1px), radial-gradient(circle, #048ce2 1px, transparent 1px);
  background-position: left top, left bottom;
  background-repeat: repeat-x, repeat-x;
  background-size: 4px 2px, 4px 2px;
}

.blog-box-inner {
  display: block;
  padding: 16px 0;
  text-align: left;
}

h4 {
  margin-bottom: 4px;
}

.blog-box-inner img {
  border-radius: 20px;
  margin: 24px auto;
}

.blog-box-inner img {
  width: 100%;
  display: block;
}

.blog-box-inner p {
  font-size: 15px;
}

.blog-box-inner:hover {
  opacity: 1 !important;
}

.blog-tag {
  width: 259px;
  margin-right: 78px;
  margin-top: 40px;
}

.category-text , .archive-text {
  font-size: 15px;

  background-image: radial-gradient(circle, #048ce2 1px, transparent 1px);
  background-position: left bottom;
  background-repeat: repeat-x;
  background-size: 4px 2px;

  padding: 4px 0;
}

.category , .archive {
  text-align: left;
}

.category a , .archive a {
  transition-property: all;
  transition-duration: 0.2s;
  transition-delay: 0s;
  transition-timing-function: ease;
}  

.category a:hover , .archive a:hover {
  opacity: 0.6;
}
.category {
  background-image: repeating-linear-gradient(90deg, #048ce2, #048ce2 1px, transparent 1px, transparent 1px), repeating-linear-gradient(90deg, #048ce2, #048ce2 1px, transparent 1px, transparent 1px);
  background-position: left top, left bottom;
  background-repeat: repeat-x, repeat-x;
  background-size: 100% 2px, 100% 2px;
  padding: 16px 0;
}

.archive {
  background-image: repeating-linear-gradient(90deg, #048ce2, #048ce2 1px, transparent 1px, transparent 1px);
  background-position: left bottom;
  background-repeat: repeat-x;
  background-size: 100% 2px;
  padding: 16px 0;
}

.pagenation {
  font-family: 'Poppins', sans-serif;
  font-size: 24px;
  margin-top: 40px;
}

.pagenation-back {
  color: #F6881D;
  background-color: #fff;
  border: 2px solid #F6881D;
  padding: 3px 9px;
  border-radius: 5px;

  transition-property: all;
  transition-duration: 0.2s;
  transition-delay: 0s;
  transition-timing-function: ease;
}

.pagenation-back:hover {
  opacity: 0.7;
}

.pagenation-next {
  color: #F6881D;
  background-color: #fff;
  border: 2px solid #F6881D;
  padding: 3px 9px;
  border-radius: 5px;

  transition-property: all;
  transition-duration: 0.2s;
  transition-delay: 0s;
  transition-timing-function: ease;
}

.pagenation-next:hover {
  opacity: 0.7;
}

.has-deeporange-color {
  color: #D9741A !important;
}
.has-orange-color {
  color: #D9741A !important;
}
.has-skyblue-color {
  color: #0671C7 !important;
}
.has-black-color {
  color: #1F1F1F !important;
}

.has-x-small-font-size {
  font-size: 12px !important;
}

.has-small-font-size {
  font-size: 13px !important;
}

.has-normal-font-size {
  font-size: 15px !important;
}

.has-large-font-size {
  font-size: 18px !important;
}

.has-huge-font-size {
  font-size: 20px !important;
}


@media screen and (max-width:1015px){
  #blog {
    display: block;
    padding: 32px 0 64px 0;
    background-color: #FFF;
    position: relative;
    background-image: none;
  }

  .blog-inner {
    max-width: 80%;
    text-align: center;
    padding: 0;
  }

  .blog-contents {
    display: block;
  }

  .blog-boxes {
    width: 80%;
    margin: 0 auto;
  }

  .blog-box-inner {
    display: block;
    padding: 24px 0;
    text-align: left;
  }

  .blog-box-inner img {
    height: auto;
    margin: 24px auto;
    width: 324px;
  }

  .blog-box-inner p {
    font-size: 16px;
  }

  .blog-tag {
    width: 80%;
    margin: 64px auto 0 auto;
  }

}