.article-frame{
  margin: 0 auto;
  max-width: 980px;
  padding: 0 20px;
}

.article-frame .lead{
  color:#3d3d3d;
  margin:0 0 3em 0;
}

.article-frame ul.categories{
  margin:0 0 20px 0;
  padding:0;
  width:100%;
}

.article-frame ul.categories li{
  margin:6px 0;
  padding:10px 0;
  list-style-type:none;
  text-align:center;
}

.article-frame ul.categories li a{
  color:#fff;
  display:block;
  text-decoration:none;
}

.article-frame ul.categories li.on a{
  color:#4c416f;
  font-weight:500;
}
.article-frame ul.categories li#milimili{
  background-color:#4C416F;
  color:#FFF;
}
.article-frame ul.categories li#milimili.on{
  background-color:#4C416F;
}
.article-frame ul.categories li#actlogy{
  background-color:#C1DA80;
  color:#FFF;
}
.article-frame ul.categories li#actlogy.on{
  background-color:#C1DA80;
}
.article-frame ul.categories li#salesforce{
  background-color:#00A1E0;
  color:#FFF;
}
.article-frame ul.categories li#salesforce.on{
  background-color:#00A1E0;
}
.article-frame ul.categories li#dev{
  background-color:#FF9326;
  color:#FFF;
}
.article-frame ul.categories li#dev.on{
  background-color:#FF9326;
}
.article-frame ul.categories li#smart-device{
  background-color:#9B9B8C;
  color:#FFF;
}
.article-frame ul.categories li#smart-device.on{
  background-color:#9B9B8C;
}
.article-frame ul.categories li#sweets{
  background-color:#FFBFBF;
  color:#FFF;
}
.article-frame ul.categories li#sweets.on{
  background-color:#FFBFBF;
}
.article-frame ul.categories li#ec{
  background-color:#F3CCB0;
  color:#FFF;
}
.article-frame ul.categories li#ec.on{
  background-color:#B973FF;
}

















#article-lists{
  padding-bottom:20px;
  max-width:1084px;
  margin:0 auto;
}

#article-lists ul.flexbox{
  display: flex;
  /*justify-content: space-between;*/
  
  
  
  
  justify-content:flex-start ;
  flex-wrap: wrap;
  padding:0;
}

#article-lists ul.flexbox li.flex-item {
 list-style: none;
  width: 100%;
  padding:0 20px 35px 20px;
}

#article-lists ul.flexbox li.flex-item p{
 margin:0;
 position:relative;
}

#article-lists ul.flexbox li.flex-item a{
  text-decoration:none;
}

#article-lists ul.flexbox li.flex-item a.article{
  display:block;
}

#article-lists ul.flexbox li.flex-item a.article .thumbnail{
  line-height:0;
  overflow: hidden;
}

#article-lists ul.flexbox li.flex-item a span{
  display:block;
}

#article-lists ul.flexbox li.flex-item a span img{
  transition: all .2s ease-in-out;
  width:100%;
  z-index: 1;
}

#article-lists ul.flexbox li.flex-item a.article:hover span img {
    transform: scale3d(1.1,1.1,1); /* hover時の倍率を指定 */
}

#article-lists ul.flexbox li.flex-item a span.date{
  color:#909090;
  font-family: "Jost", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  padding:6px 4px 2px 4px;
}

#article-lists ul.flexbox li.flex-item a span.title{
  color:#3d3d3d;
  font-weight:500;
  padding:0 4px 20px 4px;
}

#article-lists ul.flexbox li.flex-item .icon{
  color:#FFF;
  position:absolute;
  padding: 2px 6px;
  top:0;
  left:0;
  z-index:100;
}

#article-lists ul.flexbox li.flex-item .icon a{
  background-color:#CCC;
  color:#FFF;
  display:block;
  padding:8px 12px;
  line-height:1;
  text-decoration:none;
  /*
  height:100;
  width:200px;
  */
}

@media screen and (min-width: 580px) {

#article-lists ul.flexbox li.flex-item {
 width: 50%;
}

}

@media screen and (min-width: 780px) {

#article-lists {
  padding-bottom: 70px;
}

.article-frame .lead{
  font-size:18px;
  margin-left:auto;
  margin-right:auto;
  max-width:880px;
}

.article-frame ul.categories{
  border-collapse:collapse;
  display:table;
  margin:0 0 46px 0;
  padding:0;
  width:100%;
}

.article-frame ul.categories li{
  background-color:transparent !important;
  border-bottom: 2px solid #E0E0E0;
  display:table-cell;
  margin:0;
  padding:0 0 10px 0;
  list-style-type:none;
  text-align:center;
  width:12.5%;
}

.article-frame ul.categories li a{
  color:#bfbfbf;
}

.article-frame ul.categories li.on{
  border-bottom: 2px solid #CCC;
  color:#4c416f;
  font-weight:500;
}
.article-frame ul.categories li#milimili{
  border-bottom: 2px solid #4C416F;
}
.article-frame ul.categories li#milimili.on{
  border-bottom: 2px solid #4C416F;
  color:#00B2B2;
}
.article-frame ul.categories li#salesforce{
  border-bottom: 2px solid #00A1E0;
}
.article-frame ul.categories li#salesforce.on{
  border-bottom: 2px solid #00A1E0;
  color:#00B2B2;
}
.article-frame ul.categories li#actlogy{
  border-bottom: 2px solid #C1DA80;
}
.article-frame ul.categories li#actlogy.on{
  border-bottom: 2px solid #C1DA80;
  color:#00B2B2;
}
.article-frame ul.categories li#dev{
  border-bottom: 2px solid #FF9326;
}
.article-frame ul.categories li#dev.on{
  border-bottom: 2px solid #FF9326;
  color:#00B2B2;
}
.article-frame ul.categories li#smart-device{
  border-bottom: 2px solid #9B9B8C;
}
.article-frame ul.categories li#smart-device.on{
  border-bottom: 2px solid #9B9B8C;
  color:#00B2B2;
}
.article-frame ul.categories li#smart-device.on{
  border-bottom: 2px solid #9B9B8C;
  color:#00B2B2;
}
.article-frame ul.categories li#sweets{
  border-bottom: 2px solid #FFBFBF;
  color:#00B2B2;
}
.article-frame ul.categories li#sweets.on{
  border-bottom: 2px solid #FFBFBF;
  color:#00B2B2;
}
.article-frame ul.categories li#ec{
  border-bottom: 2px solid #F3CCB0;
  color:#00B2B2;
}
.article-frame ul.categories li#ec.on{
  border-bottom: 2px solid #F3CCB0;
  color:#00B2B2;
}

#article-lists ul.flexbox li.flex-item {
 list-style: none;
 padding:0 12px 35px 12px;
 width: 33%;
}

}

