/*OPACITY*/
/*TRANSITION*/
/*TRANSFORM*/
/*FLEXBOX*/
/*BORDER RADIUS*/
/*BOX SHADOW*/
/*BOX SIZING*/
/*FILTER*/
.w-img img {
  height: 100px; }

@media (max-width: 680px) {
  .pagetitle {
    margin-bottom: 15px; } }
@media (max-width: 680px) {
  .pagetitle_en {
    margin-top: 15px; } }
.listBlog {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: space-between;
  -moz-justify-content: space-between;
  -ms-justify-content: space-between;
  justify-content: space-between;
  -ms-flex-pack: space-between;
  -webkit-flex-wrap: wrap;
  -moz-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin-bottom: 15px; }
  @media screen and (max-width: 768px) {
    .listBlog {
      margin-top: 30px; } }
  .listBlog a {
    width: 28.6%;
    display: block;
    background-color: #FFF;
    border-radius: 8px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    padding: 20px;
    margin-bottom: 10px;
    text-decoration: none;
    color: auto;
    -webkit-transition: 0.5s ease opacity;
    -moz-transition: 0.5s ease opacity;
    -ms-transition: 0.5s ease opacity;
    -o-transition: 0.5s ease opacity;
    transition: 0.5s ease opacity; }
    @media screen and (max-width: 1024px) {
      .listBlog a {
        width: 28%;
        margin-bottom: 15px; } }
    @media screen and (max-width: 850px) {
      .listBlog a {
        width: 27%;
        margin-bottom: 15px; } }
    @media screen and (max-width: 767px) {
      .listBlog a {
        width: 43%; } }
    @media screen and (max-width: 640px) {
      .listBlog a {
        width: 42%; } }
    @media screen and (max-width: 550px) {
      .listBlog a {
        width: 41%; } }
    @media screen and (max-width: 480px) {
      .listBlog a {
        width: 40%;
        padding: 4%; } }
    .listBlog a .img {
      width: 100%;
      height: 175px;
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center;
      margin-bottom: 15px;
      -webkit-transition: 0.5s ease opacity;
      -moz-transition: 0.5s ease opacity;
      -ms-transition: 0.5s ease opacity;
      -o-transition: 0.5s ease opacity;
      transition: 0.5s ease opacity; }
      @media screen and (max-width: 850px) {
        .listBlog a .img {
          height: 160px; } }
      @media screen and (max-width: 767px) {
        .listBlog a .img {
          height: 25vw; } }
    .listBlog a .content span {
      display: none; }
    .listBlog a .content h2 {
      font-size: 18px;
      font-weight: bold;
      color: #3a2100;
      margin-bottom: 0;
      overflow: hidden;
      max-height: 56px;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical; }
      @media screen and (max-width: 480px) {
        .listBlog a .content h2 {
          margin-bottom: 0;
          font-size: 16px; } }
    .listBlog a .content p {
      font-size: 15px;
      color: #282828;
      overflow: hidden;
      max-height: 85px;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
      display: none; }
    .listBlog a:hover .img {
      opacity: 0.7;
      filter: alpha(opacity=70); }
  @media screen and (max-width: 767px) {
    .listBlog.PC {
      display: none; } }
  .listBlog.SP {
    display: none; }
    @media screen and (max-width: 767px) {
      .listBlog.SP {
        display: -webkit-box;
        display: -moz-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex; } }

.margin {
  margin-top: 50px; }

/*# sourceMappingURL=style-portfolio.css.map */