@charset "UTF-8";

/* policy
-----------------------------------------------------*/
#blog .sectionTitle {
  background: url("../imgs/blog/blog_title.png") no-repeat center;
}

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

}


/* archive
--------------------------------------------------*/

#archive .flex-wrap {
  margin-bottom: 50px;
}
#archive .flex-wrap div {
  width: 270px;
  margin-right: 40px;
}
#archive .flex-wrap div:nth-of-type(4n) {
  margin-right: 0;
}
#archive figure p {
  width: 270px;
  height: 152px;
  overflow: hidden;
}
#archive figure img {
  transition-duration: 0.5s;
}
#archive a:hover figure img {
  transform: scale(1.2);
  transition-duration: 0.5s;
}
#archive figcaption h3 {
  font-size: 1.3rem;
  font-weight: 500;
  line-height: 1.5;
  min-height: 45px;
}
#archive figcaption time {
  font-family: 'Spartan', sans-serif;
  font-weight: 500;
  color: #CBCBCB;
  font-size: 1.1rem;
}
@media screen and (max-width: 767px) {

  #archive .flex-nowrap {
    flex-flow: column;
  }
  #archive .flex-wrap div {
    width: 100%;
    margin: 0 0 20px 0; 
  }
  #archive figure {
    display: flex;
    flex-wrap: nowrap;
  }
  #archive figure p {
    width: 45%;
    height: auto;
  }

  #archive figure figcaption {
    width: 50%;
    margin-left: auto;
  }
  #archive figcaption h3 {
    height: auto;
    margin-bottom: 10px;
    min-height: inherit;
  }
}

/* detail
--------------------------------------------------*/

#postTitle {
  width: 100%;
  padding: 20px 0;
  align-items: center;
  border-bottom: solid 4px #E6E6E6;
  position: relative;
}
#postTitle::after {
  position: absolute;
  content: " ";
  display: block;
  border-bottom: solid 4px #F7D21E;
  bottom: -4px;
  width: 20%;
}
#postTitle dt {
  width: 85%;
  font-size: 1.9rem;
  font-weight: 500;
  border-right: solid 2px #E6E6E6;
}
#postTitle dd {
  width: 15%;
  text-align: center;
  font-size: 1.2rem;
  font-family: 'Spartan', sans-serif;
  font-weight: 600;
  color: #CBCBCB;
}
#postBlock {
  padding: 50px 0;
  font-size: 1.4rem;
}
@media screen and (max-width: 767px) {
  #postTitle {
    flex-wrap: wrap;
  }
  #postTitle dt,
  #postTitle dd {
    width: 100%;
  }
  #postTitle dt {
    font-size: 1.6rem;
    line-height: 1.5;
    margin-bottom: 15px;
    border: none;
  }
  #postTitle dd {
    text-align: left;
  }
  #postBlock {
    padding-top: 25px;
  }
}